View the source

Add hover-state tooltips that can be styled by CSS to your elements. The tooltip text is just the element’s title attribute (the same as it would be without this script).

Example:

Some HTML

<h2 id="party" title="Click here to see the party.">Party.</h2>

The JavaScript

$('party').makeToolTip()

The #party element will now have a tooltip. Tooltip elements get the class name hint, so you can style them however you please.

You also get Element#tipSection which allows you to say that every descendant of an element should have a tooltip. This is ideal for help sections or inline FAQs.

Some HTML

<ul id="testElements">
  <li><a href="#red" title="This is the red link">Red</a></li>
  <li><a href="#green" title="This is the green link">Green</a></li>
  <li><a href="#blue" title="This is the blue link">Blue</a></li>
  <li><a href="#purple" title="This is the purple link">Purple</a></li>
  <li><a href="#orange" title="This is the orange link">Orange</a></li>
  <li><a href="#cyan" title="This is the cyan link">Cyan</a></li>
</ul>

The JavaScript

$('testElements').tipSection()

Both the makeToolTip and tipSection methods can take a few options. Here they are:

• delay (default: 250) How much time should the mouse be hovering before the tooltip appears (in milliseconds)
• offset (default: 5) How far away the tooltip should be from the mouse pointer (in pixels)
• bindToMouse (default: true) Whether or not the tooltip should move when the mouse does
• elementCursor (default: 'pointer') If you want to specify a different cursor style for elements that have tooltips, here’s your chance.