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!