Entries tagged div
Using Tippy without the tags
October 11th, 2011
|
Tippy WordPress Plugin
|
4 Comments

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.

This is a regular div, but I’ve added onmouseover and onmouseout calls to the div. The Tippy function is being called directly rather than using the shortcode to handle the call for me.

Here is how it looks:

<div tippyTitle="Tippy in a div" id="mydiv" onmouseover="Tippy.loadTipInfo('Here is an example of using Tippy with a div element.', 0, 0, 'mydiv', event);" onmouseout="Tippy.fadeTippyOut();">
div content
</div>

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:

Yay to Tippy in divs!

 

<div id="secondDiv" style="background-color: #ccc; padding: 2px;" onmouseover="Tippy.loadTipInfo('Display more tooltip info.', 0, 0, 'secondDiv', event, 'Second div example.');" onmouseout="Tippy.fadeTippyOut();">
Yay to Tippy in divs!
</div>

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:

<div id="badDiv" onmouseover="Tippy.loadTipInfo('I'll try to display an image: <img src="myimage.png" />', 0, 0, 'badDiv', event, 'This won't work.');" onmouseout="Tippy.fadeTippyOut();">

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:

htmlentities($tippyText, ENT_QUOTES, 'UTF-8');

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!