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.

Adding yet another plugin to my repertoire, I have created the Mensy plugin for WordPress. Unlike my other plugins, Mensy is not intended to be used within posts and pages (though it will work just fine there!) but will find most of its use in themes and layouts.

Mensy makes it easy to create drop-down menus using a standard ul/li list of links. Mensy allows multiple levels and includes some tracking code to make navigating the menu more elegant.

Using a plugin like Mensy is superior to a pure CSS drop-down menu since Mensy allows features such as more advanced styling, level notifications, and brief delays fading out a menu if the user mouses out accidentally.

Mensy is written in CSS and JavaScript and relies on jQuery for much of its magic.

Learn more and see a demo at the Mensy page.

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.