From IThemes Codex
Revision as of 10:28, October 7, 2011 by Josh (Talk | contribs)
Jump to: navigation, search

Series: DisplayBuddy



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.


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.

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 parameters


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.

Additional Resources

  1. Free Plugins by PluginBuddy
  2. PluginBuddy Tutorials
  4. Support Forums
Personal tools
iThemes Codex
Codex Navigation