Tipsy WordPress Plugin from iThemes

Last updated February 21st, 2019 at 06:46 am

Overview

[tipsy content=’Visit iThemes.com (in a new browswer window).’ group=”1″ use_oembed=”false” ]iThemes[/tipsy], the makers of the great [tipsy content=’Check out Backup Buddy at Ithemes.com (new browser window)’ group=”1″ use_oembed=”false” ]BackupBuddy[/tipsy] plugin for WordPress sites, offers a number of useful plugins. One that I just downloaded and installed is Tipsy (yeah, [tipsy content=”Tipsy adds clickable pop-up tips that can include text, images, videos or embedded content. Add Tipsy tips to posts, page or widget content and create unlimited groups with different settings, style selections and optional preset content. (From the iThemes Web site.)” group=”0″ use_oembed=”false” ]hover over me[/tipsy] to learn with Tipsy does), and this post is a test of how it works. Note that anything that [tipsy content=”I want tooltip links to look different from normal links.” group=”0″ use_oembed=”false” ]appears like this[/tipsy] in this post has a Tipsy ToolTip associated with it. By hovering over a Tipsy ToolTip link (although the plugin can be configured to be activated upon click, instead), the tool tip should pop up.

Installation and Setup

Installation and setup is very simple.

1. Install the plugin in [tipsy content=’The official instructions for installing plugins can be found at this WordPress.org page.’ group=”1″ use_oembed=”false” ]any of the ways plugins[/tipsy] are installed.
2. Create a first Tipsy Group. A Tipsy Group is a unique set of configuration options.
   For this post, I created two groups. One I initially named “First” but then renamed it to “Hide300” to help me remember that it has auto hide set to true and maximum width set to 300 pixels. Groups can be named anything.

   Here’s a screen shot of the Tipsy Group Setup screen; click to enlarge. Note that I left the “Tip content” box blank. This is the norm; it allows you to set the tooltip text independently for each case.

   

   (The reason I set up a second Tipsy Group (which I named “Persistent”) is that the auto-hide feature isn’t appropriate for a tool tip that includes a hyperlink that I want my visitors to be able to click. The only difference between the “Hide300” group and the “Persistent” group is that auto-hide is turned off for the latter.)

Implementing in a Post

Note that the screen shots show the “HTML” view.

1. Highlight the segment of your post to which you want to associate a tool tip, and click the “Tipsy” toolbar in your editor.

   

2. Enter the content and click “Save Settings”.

   

3. When you click “Save Settings”, WordPress will insert the appropriate shortcode into your post:

   

   Warning: When entering content that includes quotation marks (such as the hyperlink in the above example), you’ll have to manually replace the double-quotes that embrace the content element of the short code with single-quotes. I’ll be doing further testing — including entering Tipsy tooltips in Visual mode; and I’ll report back.

Reactions and Outlook

Outlook: Promising!

I like this one. Might it encourage one to go a little crazy with tooltips &#8212 when, perhaps, more conventional methods for adding auxilliary content might be more appropriate? Sure. But this little plugin offers a simple solution for something that can make your Web site a little more interesting and engaging.

Comments or questions? Feel free to post below.