Tipsy

(Difference between revisions)
Jump to: navigation, search
(Fixed Videos and Images Shortcode syntax - Shortcode)
(Added "New Lines - Line Breaks" and - HTML Code: sections)
(10 intermediate revisions by 2 users not shown)
Line 20: Line 20:
  
 
==Shortcode==
 
==Shortcode==
Display your Tipsy in style by using the shortcode <code>[tipsy content="tip content goes here" use_oembed='false' group="0"]content that the tip applies to[/tipsy]</code>
+
Display your Tipsy in style by using the shortcode <code>[tipsy content="tip content goes here" use_oembed='false' group="0"]content that the tip applies to[/tipsy]</code>. We recommend doing this in the HTML Mode editor.
  
 
===Shortcode Parameters===
 
===Shortcode Parameters===
Line 29: Line 29:
 
===Display Videos inside Tipsy Shortcode===
 
===Display Videos inside Tipsy Shortcode===
  
Use the following format to show YouTube videos inside the Tipsy tooltip. Change the video link to any YouTube link you wish:
+
Use the following format to show YouTube videos inside the Tipsy tooltip in the HTML Mode editor. Change the video link to any YouTube link you wish:
  
<code>[tipsy content="http://www.youtube.com/watch?v=wf_IIbT8HGk" use_oembed='true' group="0"]content that the tip applies to[/tipsy]</code>
+
<code>[tipsy content="http://www.youtube.com/watch?v=FDHNequGw4k" use_oembed='true' group="0"]content that the tip applies to[/tipsy]</code>
  
 
===Display Images inside Tipsy Shortcode===
 
===Display Images inside Tipsy Shortcode===
  
Use the following format to show images inside the Tipsy tooltip. Change the image link to any image link online:
+
Use the following format to show images inside the Tipsy tooltip in the HTML Mode editor. Change the image link to any image link online:
  
<code>[tipsy content='<img src="http://www.googlestore.com/images/googlestore_large.gif">' group="0" ]content that the tip applies to[/tipsy]</code>
+
<code>[tipsy content='<img src="http://pluginbuddy.com/files/2011/10/Tipsy-copy-150x150.png">' group="0" ]content that the tip applies to[/tipsy]</code>
 +
 
 +
===Display iframe inside Tipsy Shortcode===
 +
 
 +
Use the following format to show any kind of an iframe inside the Tipsy tooltip in the HTML Mode editor. Change the link and width/height dimensions to your needs:
 +
 
 +
<code>[tipsy content='<iframe src="http://www.ithemes.com" frameborder="0" width="200" height="110"></iframe>' group="2" ]testing iframes[/tipsy]</code>
 +
 
 +
*Related link
 +
**http://ithemes.com/forum/index.php?/topic/20204-using-tipsy-to-display-iframe-content/
 +
 
 +
 
 +
===SAMPLE Shortcode Text File===
 +
 
 +
If you are having trouble copy pasting the above code OR not getting it to work, here is a sample TEXT file that you can copy paste from. Simply copy paste the contents into your Page or Post editor, in HTML Mode, test that it works, and then change the links accordingly.
 +
 
 +
http://bes.internal.ithemes.com/tipsy-media-shortcode.txt
 +
 
 +
===Special Characters===
 +
 
 +
If you want to show special characters in your Tipsy, like " @ & % $ and others, simply replace them with their [http://www.utexas.edu/learn/html/spchar.html HTML counterpart ]
 +
 
 +
===New Lines - Line Breaks===
 +
 
 +
If you want to have a line break in Tipsy, simply put the line break (ENTER key) inside the Tipsy content instead of using any html code.
 +
 
 +
Example of a line break:
 +
 
 +
<pre brush="html">[tipsy content="Actual content Actual content
 +
 
 +
NEW NEW LINE WITHOUT HTML" group="0" ]Testing 1[/tipsy]</pre>
 +
 
 +
 
 +
===HTML Code===
 +
 
 +
Simply putting in html code inside the Tipsy shortcode should work.
 +
 
 +
Example of html inside Tipsy:
 +
 
 +
<pre brush="html">[tipsy content="Actual content Actual content <ul><li>abc</li></ul>" group="0" ]Testing 1[/tipsy]</pre>
  
 
==Template Tag==
 
==Template Tag==
Line 95: Line 134:
 
'''Tip Content''' - Default content that goes inside the tooltip itself.
 
'''Tip Content''' - Default content that goes inside the tooltip itself.
  
 +
==Customize Tipsy==
 +
 +
===Extra Customizations Policies===
 +
[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check out the official policy and details on any Extra Customizations]
 +
 +
===Edit and/or Create More Layouts===
 +
Tipsy comes with six current layouts that you can choose from to style your Tipsy tooltips. You can edit any existing layout OR create a new one to suit your needs.
 +
 +
Make a [http://pluginbuddy.com/purchase/backupbuddy/ BackupBuddy backup of everything before you proceed], or at least download the existing styles to your computer as a backup. You can also always download the latest Tipsy from your [http://ithemes.com/member/member.php Member's Area], unzip it on your computer and upload only the wp-content/plugins/tipsy/layouts in case you want to restore the default layouts (in case you accidentally mess up something that you want to undo).
 +
 +
*Remember: if you edit any existing default layout that comes with Tipsy, all your changes will be lost when you upgrade Tipsy to any newer version.
 +
 +
=====Edit Existing Layout=====
 +
*To edit any existing layout display:
 +
**Go to wp-content/plugins/tipsy/layouts folder
 +
**Go into the layout you want to edit. Each layout is ordered in the manner it is shown in your Tipsy Group Settings area, from left to right.
 +
**Edit the style.css file in that folder to your liking.
 +
**Save. Your Tipsy will now be shown according to your styling changes in the style.css file.
 +
 +
Note that you will have to edit any existing layout again after upgrades, as upgrading to any new Tipsy version would override the default templates with never versions. It is recommended that you instead create a new layout, as explained below.
 +
 +
=====Create New Layout=====
 +
*To create a new Tipsy layout, you can do one of the following 2:
 +
**1 : Create a new folder in the wp-content/plugins/tipsy/layouts folder
 +
***Put a style.css file in that folder and any image with the name screenshot.png
 +
***Put any form of styling you wish in that style.css file. You can check the existing layout folders to copy paste the styling classes from.
 +
**2 : Duplicate any existing folder in the wp-content/plugins/tipsy/layouts folder and work on that css file.
 +
***Go to the wp-content/plugins/tipsy/layouts folder
 +
****If you are using a control panel like cPanel, duplicate any folder and give it any different name you wish.
 +
****If you are using an FTP program, download any layout folder to your computer, rename it, and then upload it back up.
 +
***Edit the style.css file in that newly duplicated/renamed/uploaded folder to suit your needs.
 +
 +
After you edit any existing layout OR create a new Tipsy layout, simply go into any Tipsy Group Settings and choose the appropriate Layout image for the styling you just worked on in the new folder.
 +
 +
*Remember:
 +
**1 : Each image shown in Tipsy Group Settings page corresponds to the folder order list in the wp-content/plugins/tipsy/layouts folder. So if you click on the 4th image on your Tipsy Group Settings page, you are basically choosing the 4th folder, listed alphabetically, in the wp-content/plugins/tipsy/layouts folder.
 +
**2 : If you edit any existing default Tipsy layout instead of creating a new Tipsy layout, all your changes will be lost when you upgrade to a newer version. Upgrading results in all the default files, including the default templates, to be overwritten also. You will have to redo the changes again if you choose this route. Better option would be to create a new layout as explained above.
 +
 +
===Change color of the arrow in Default layout===
 +
 +
To change the color of the arrow in the Default layout, you want to style the <code>#tiptip_holder.tip_right #tiptip_arrow_inner</code> property.
 +
 +
To do this, edit the '''style.css''' file in the '''wp-content/plugins/tipsy/layouts/default''' folder (OR any folder you have your layout in) and modify (or have) the following:
 +
 +
<pre brush="css">#tiptip_holder.tip_right #tiptip_arrow_inner {
 +
margin-top: -6px;
 +
margin-left: -5px;
 +
border-right-color: rgb(255,0,0);
 +
border-right-color: rgba(255,0,0,0.92);
 +
}
 +
</pre>
 +
 +
Change the <code>250,0,0</code> to your prefer color's RGB code. In the above example, <code>250,0,0</code> is RED.
 +
 +
*Related links
 +
**[http://www.w3.org/TR/css3-color/ Info on CSS3 colors and their RGB codes]
 +
**[http://www.google.com/#hl=en&sugexp=gsihc&cp=8&gs_id=r&xhr=t&q=color+rgb Google search for RGB values of colors]
 +
 +
===Change position of the Tipsy box===
 +
 +
To change the position of the tipsy box, you can either change the "'''''Edge offset'''''" value in Tipsy group settings, or modify the <code>#tiptip_holder</code> property in the style.css file of your folder of the layout you have currently chosen in Tipsy '''wp-content/plugins/tipsy/layouts/YOUR-CHOSEN-LAYOUT-NAME'''
 +
 +
Edit the style.css file and the entire section below to anything you like:
 +
 +
<pre brush="css">#tiptip_holder {
 +
display: none;
 +
position: absolute;
 +
top: 0;
 +
left: 100px;
 +
z-index: 99999;
 +
}</pre>
 +
 +
'''Top''' and '''left''' values change the location of the entire Tipsy tooltip. In the above example, <code>left: 100px;</code> basically moves the entire Tipsy 100 pixels to the right.
  
 
==Additional Resources==
 
==Additional Resources==
Line 100: Line 212:
 
# [http://pluginbuddy.com/tutorials/ PluginBuddy Tutorials]
 
# [http://pluginbuddy.com/tutorials/ PluginBuddy Tutorials]
 
# [http://pluginbuddy.com/ PluginBuddy.com]
 
# [http://pluginbuddy.com/ PluginBuddy.com]
# [http://pluginbuddy.com/support/ Support Forums]
+
# [http://ithemes.com/forum/tipsy/ Tipsy Support Forums]
  
 
[[Category:PluginBuddy]]
 
[[Category:PluginBuddy]]

Revision as of 17:48, November 21, 2011


Tipsy is available as a stand-alone plugin or as part of the DisplayBuddy series. See a demo here or try it out in WordPress live!


Contents

Description

The Tipsy plugin adds the ability to create tooltips for placement in posts or pages. Tooltips are displayed when hovering or clicking on specified content. This allows you to provide additional information to visitors.

Groups

The first step in adding Tipsy tooltips to your site is to create a group in the Tipsy settings. Tipsy allows you to create multiple groups with unique settings, styles, and even default tip content.

Feature Overview

6 different tooltip layouts to choose from.

Tipsy uses oembed for embedding media within the tooltip. See a list of what media oembed supports here


Displaying on your site

To add a Tooltip you will need to first be editing a page or post. Highlight the text/content that you would like to be hovered or clicked to display the tooltip. Then click the Tipsy icon in the WYSIWYG editor. Select the Tipsy group you would like to use and provide the test/content you would like to display within the Tipsy tip. This can be test or other HTML elements, even video.

Shortcode

Display your Tipsy in style by using the shortcode [tipsy content="tip content goes here" use_oembed='false' group="0"]content that the tip applies to[/tipsy]. We recommend doing this in the HTML Mode editor.

Shortcode Parameters

content · Content that goes inside of the tooltip.
group · group number for the tooltip group that you want to display.
use_oembed . true or false - Whether to embed videos or not (uses oEmbed)

Display Videos inside Tipsy Shortcode

Use the following format to show YouTube videos inside the Tipsy tooltip in the HTML Mode editor. Change the video link to any YouTube link you wish:

[tipsy content="http://www.youtube.com/watch?v=FDHNequGw4k" use_oembed='true' group="0"]content that the tip applies to[/tipsy]

Display Images inside Tipsy Shortcode

Use the following format to show images inside the Tipsy tooltip in the HTML Mode editor. Change the image link to any image link online:

[tipsy content='<img src="http://pluginbuddy.com/files/2011/10/Tipsy-copy-150x150.png">' group="0" ]content that the tip applies to[/tipsy]

Display iframe inside Tipsy Shortcode

Use the following format to show any kind of an iframe inside the Tipsy tooltip in the HTML Mode editor. Change the link and width/height dimensions to your needs:

[tipsy content='<iframe src="http://www.ithemes.com" frameborder="0" width="200" height="110"></iframe>' group="2" ]testing iframes[/tipsy]


SAMPLE Shortcode Text File

If you are having trouble copy pasting the above code OR not getting it to work, here is a sample TEXT file that you can copy paste from. Simply copy paste the contents into your Page or Post editor, in HTML Mode, test that it works, and then change the links accordingly.

http://bes.internal.ithemes.com/tipsy-media-shortcode.txt

Special Characters

If you want to show special characters in your Tipsy, like " @ & % $ and others, simply replace them with their HTML counterpart

New Lines - Line Breaks

If you want to have a line break in Tipsy, simply put the line break (ENTER key) inside the Tipsy content instead of using any html code.

Example of a line break:

[tipsy content="Actual content Actual content 

NEW NEW LINE WITHOUT HTML" group="0" ]Testing 1[/tipsy]


HTML Code

Simply putting in html code inside the Tipsy shortcode should work.

Example of html inside Tipsy:

[tipsy content="Actual content Actual content <ul><li>abc</li></ul>" group="0" ]Testing 1[/tipsy]

Template Tag

You can manually call Tipsy if you know the Group ID.

<?php
/*
* pb_tipsy()
* Insert a Tipsy tooltip
*
*
* 		The defaults for the parameter $args are:
*		content - Default is an empty string - The content to show in the tooltip
*		group - Default is 0 - The Group ID (you can get this from the Tipsy settings)
*		filler - Default is an empty string - The text that people hover/click on to view the tooltip
*		use_oembed - Default is false - Whether you intend to use oembed to embed a video
*
*
* @param array $args Elements that make up a voting group to insert.
* @return Tip HTML on success */
?>
<td id="accordion" align="left">
<?php echo pb_tipsy( array(
	'content' => 'http://www.youtube.com/watch?v=NfBsRc0R3Ps&hd=1',
	'filler' => 'Admin Dashboard',
	'group' => 1,
        'use_oembed' => true

) ); ?>

To see a live example of this template tag in use, please download our Tipsy Page Template (should be able to drop into any theme to test it): File:Tipsy.php.zip

Group Settings

Here is a list of all of the Tipsy settings and a description of what each setting controls.

Group Title - This setting will allow you to change the title of the group at any time.

Tip activation - Method upon which the tooltip is activated. Can be set on hover, focus, or click.

Tip Position - Default orientation tooltip should show up as. You can set it to: "top", "bottom", "left" or "right".

Auto hide - When set to true the tooltip will only fadeout when you hover over the actual tooltip and then hover off of it.

Max width - CSS max-width property for the Tipsy element.

Edge offset - Distances the Tipsy popup from the element with tooltip applied to it by the number of pixels specified.

Display delay - Number of milliseconds to delay before showing the Tipsy popup after you mouseover an element with tooltip applied to it.

Fade in speed - Speed at which the Tipsy popup will fade into view.

Fade out speed - Speed at which the Tipsy popup will fade out of view.

Tip Content - Default content that goes inside the tooltip itself.

Customize Tipsy

Extra Customizations Policies

Check out the official policy and details on any Extra Customizations

Edit and/or Create More Layouts

Tipsy comes with six current layouts that you can choose from to style your Tipsy tooltips. You can edit any existing layout OR create a new one to suit your needs.

Make a BackupBuddy backup of everything before you proceed, or at least download the existing styles to your computer as a backup. You can also always download the latest Tipsy from your Member's Area, unzip it on your computer and upload only the wp-content/plugins/tipsy/layouts in case you want to restore the default layouts (in case you accidentally mess up something that you want to undo).

  • Remember: if you edit any existing default layout that comes with Tipsy, all your changes will be lost when you upgrade Tipsy to any newer version.
Edit Existing Layout
  • To edit any existing layout display:
    • Go to wp-content/plugins/tipsy/layouts folder
    • Go into the layout you want to edit. Each layout is ordered in the manner it is shown in your Tipsy Group Settings area, from left to right.
    • Edit the style.css file in that folder to your liking.
    • Save. Your Tipsy will now be shown according to your styling changes in the style.css file.

Note that you will have to edit any existing layout again after upgrades, as upgrading to any new Tipsy version would override the default templates with never versions. It is recommended that you instead create a new layout, as explained below.

Create New Layout
  • To create a new Tipsy layout, you can do one of the following 2:
    • 1 : Create a new folder in the wp-content/plugins/tipsy/layouts folder
      • Put a style.css file in that folder and any image with the name screenshot.png
      • Put any form of styling you wish in that style.css file. You can check the existing layout folders to copy paste the styling classes from.
    • 2 : Duplicate any existing folder in the wp-content/plugins/tipsy/layouts folder and work on that css file.
      • Go to the wp-content/plugins/tipsy/layouts folder
        • If you are using a control panel like cPanel, duplicate any folder and give it any different name you wish.
        • If you are using an FTP program, download any layout folder to your computer, rename it, and then upload it back up.
      • Edit the style.css file in that newly duplicated/renamed/uploaded folder to suit your needs.

After you edit any existing layout OR create a new Tipsy layout, simply go into any Tipsy Group Settings and choose the appropriate Layout image for the styling you just worked on in the new folder.

  • Remember:
    • 1 : Each image shown in Tipsy Group Settings page corresponds to the folder order list in the wp-content/plugins/tipsy/layouts folder. So if you click on the 4th image on your Tipsy Group Settings page, you are basically choosing the 4th folder, listed alphabetically, in the wp-content/plugins/tipsy/layouts folder.
    • 2 : If you edit any existing default Tipsy layout instead of creating a new Tipsy layout, all your changes will be lost when you upgrade to a newer version. Upgrading results in all the default files, including the default templates, to be overwritten also. You will have to redo the changes again if you choose this route. Better option would be to create a new layout as explained above.

Change color of the arrow in Default layout

To change the color of the arrow in the Default layout, you want to style the #tiptip_holder.tip_right #tiptip_arrow_inner property.

To do this, edit the style.css file in the wp-content/plugins/tipsy/layouts/default folder (OR any folder you have your layout in) and modify (or have) the following:

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: rgb(255,0,0);
	border-right-color: rgba(255,0,0,0.92);
}

Change the 250,0,0 to your prefer color's RGB code. In the above example, 250,0,0 is RED.

Change position of the Tipsy box

To change the position of the tipsy box, you can either change the "Edge offset" value in Tipsy group settings, or modify the #tiptip_holder property in the style.css file of your folder of the layout you have currently chosen in Tipsy wp-content/plugins/tipsy/layouts/YOUR-CHOSEN-LAYOUT-NAME

Edit the style.css file and the entire section below to anything you like:

#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 100px;
	z-index: 99999;
}

Top and left values change the location of the entire Tipsy tooltip. In the above example, left: 100px; basically moves the entire Tipsy 100 pixels to the right.

Additional Resources

  1. Free Plugins by PluginBuddy
  2. PluginBuddy Tutorials
  3. PluginBuddy.com
  4. Tipsy Support Forums
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox