In my previous post I showed how to include Tippy calls directly from your theme file where the shortcode is unavailable. In that example, all I wanted was a regular Tippy link so we were able to make use of the tippy_formatLink() function. But let’s take the example one step farther. What if I don’t want a tooltip on a regular link but instead on an image?

For this example, I’m going to have a smaller image and a larger image. The theme file will automatically display the smaller image under the post title and if you hover over it, it will pop up with the larger image. I could do like last time and add a custom field such as post_tooltip_small_image and post_tooltip_large_image with the url or path to those images, but for this example I’ll keep it simple and code it in directly.

See the top of this post, just above the title, for the code in action. Here’s how to get it going:

Lines 1 & 3: Like in the last example, I’m only doing this on a specific post, so check post id. Also, make sure Tippy is loaded.

Lines 5 & 6: Specify where your small and large images are stored.

Line 8: Specify your tooltip title, if desired.

Line 9: Specify what you want to display inside your tooltip. In this case, we’re wanting to display an image.

Line 11: In the last example, I said to run your content through tippy_format_text() instead of htmlentities(). In this case, however, we need to use htmlentities() (and in some cases may need both htmlentities() and tippy_format_text()!) since we’re bypassing tippy_formatLink. So before you pass your content string to the JavaScript function, make sure to run it through htmlentities() the way I do it above.

Line 13: Output the tooltip with your formatting options. If you don’t want this to be a link, just remove the anchor tag and put the id, onmouseover, and onmouseout calls on your img tag. For example:

Note that not all browsers (*cough*IE 6*cough) recognize onmouseover and onmouseout on image tags.

It is important to know how Tippy.loadTipInfo is declared. In Javascript, this function maps to domTip_loadTipInfo() and it is declared:

Whatever id you use for id=”" in the link or image tag, be sure to pass it to domTip_tipId
Set domTip_tipWidth and domTip_tipHeight to 0 if you want them to use default values.
You should always pass even for domTip_event
domTip_tipTitle can be empty, unless you want to show a header title on the tooltip.

That should about do it!

Tippy was created to work with WordPress shortcodes, but what do you do if you want to use Tippy directly within your theme file? Simple! You pay me $4.7 million and ask me to do it for you!

Short of that, it is fairly simple to add Tippy calls directly to your WordPress theme file. Here’s how.

For this post, I’ll be putting together a specific example, but you can adapt this for whatever you are doing.

Let’s say I want to add some custom metadata to a WordPress post and I would like a way to automatically display that metadata in a tooltip underneath the post title. For this example, I have modified my WordPress theme’s single.php file and have done just that, so you should see a Tippy link under the post title at the top of this page. In my post I added two custom fields: post_popup_title and post_popup_content – the purpose of these should be self explanatory.

Here is the coded I added to single.php to get it to display the above Tippy link:

Note that I’m only running this code on a specific post, hence my check with get_the_ID()

Line 3: Make sure the plugin is loaded and accessible.

Lines 5 & 6: retrieve title & content from the metadata

Line 8: run the content through the tippy_format_text() function; this performs some automatic conversions to make sure html, etc, work properly without making JavaScript mad. Note that you should use tippy_format_text() instead of htmlentities(). When you create the Tippy link via tippy_formatLink(), htmlentities() is automatically applied.

Line 10: Get and output the Tippy tooltip link using tippy_formatLink(). It is declared as:

The variables should all be self-explanatory, but feel free to post a comment if any of these are unclear.

That’s it! Of course you can set $tip_title and $tip_content to whatever you want; just be sure to pass $tip_content through tippy_format_text() or you might get a JavaScript error when hovering over the link.

Tippy has been written with WordPress in mind, but what if you want to use Tippy outside of WordPress – in a static HTML file, another CMS, or a custom project? In such situations, it will not be possible to use the Tippy short tags, but you can still use Tippy following the approach described in Using Tippy Without the Tags. To make it work, you will need to be sure and include any files needed by Tippy: jQuery, dom_tooltip.js, and dom_tooltip.factory.css.

I have put together an example: Tippy on a Static Page. Go there and view the page source to see how to set it up, or scroll around the code example below.

One question I get asked a lot is if it is possible to use Tippy directly on elements rather than through the Tippy short tag. The short answer is yes, it is possible, and here’s how.

Here is how it looks:

The most important parts are in onmouseover and onmouseout. The function Tippy.loadTipInfo() creates and displays the Tippy object, while Tippy.fadeTippyOut makes it go away.

Notice that in my example above, the div has a special attribute, tippyTitle. There are a few options for setting the tooltip title. With Tippy 3.6.4, options are limited: set the tippyTitle attribute, or let Tippy do its default behavior of grabbing the content of its tag, in this case, everything in the div. That would be a long title, so it’s far from ideal.

Tippy 3.7.0 adds two new options: manually specify, the title attribute, or pass the title to the Tippy.loadTipInfo() function. With Tippy 3.7.0, here are the parameters for loadTipInfo:

Tippy.loadTipInfo(text, width, height, id, event, title)

• Text is whatever you want to display inside the body of the tooltip.
• Width and height specify the size of the tooltip. Set 0 to use default values.
• id passes along the id of the element containing the tooltip. In this case, we want the tooltip to attach to the div with id mydiv so we pass mydiv for the id parameter.
• An event object must be passed in.
• Finally, the new parameter is the title. When you write the Tippy code, instead of specifying the title or tippyTitle attribute on your div element, specify the title in the function call.

Here is another example:

Note that when you manually write this out, you need to be careful of what you put in your tooltip text. Something like the following will not work:

Single quotes and double quotes inside the text or title parameters will throw off the JavaScript. When you use the Tippy shortcode, the plugin will automatically run the text through the following PHP function:

If you want to manually add Tippy links to your layout, you may want to use this function to keep quotes from going where they don’t belong.

Hope that helps!

Just released Tippy 3.5.0! This release includes various internal changes as well as adds the option to present a Close link. The Close link is useful for mobile users who can activate the tooltip but have not been able to dismiss it.

Internal changes are both on the JavaScript and PHP sides. Tippy is now a JavaScript object, and both the JavaScript and PHP code have been tweaked to make it easier for other plugins to use them.

Grab Tippy 3.5.0 at the Tippy page!