Twipsy Twipsies all over the page

Twipsy

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

Setting Options

All options can be set on three points, they are read in the following order:

  1. The Twipsy.defaults property
  2. The Element.twipsy method, or the new Twipsy(); constructor
  3. The data-* properties of the triggering element.

If you want to use the last method, keep in mind that data attributes use hypens that will be turned into camel case. eg.: if you want to set the delayIn options, write an element like this:
<a href="#"" title="The twipsy content" data-delay-in="20">Show me</a>

Available Options

Name Type Default description
animate boolean true apply a css fade transition to the tooltip
delayIn number 0 delay before showing tooltip (ms)
delayOut number 0 delay before hiding tooltip (ms)
fallback string '' text to use when no tooltip title is present
placement string 'above' how to position the tooltip - above | below | left | right
html boolean false allows html content within tooltip
offset number 0 pixel offset of tooltip from target element
title string, function 'title' attribute or method for retrieving title text
trigger string 'hover' how tooltip is triggered - hover | focus | manual
template string [default markup] The html template used for rendering a twipsy.
injectStyles boolean true Inject the default styles. Useful if you need a ready and go solution for twipsies. In case you want to use your own styles, set this to false. eg:
Twipsy.defaults.injectStyles = false;
window.addEvent("domready", function() {
  $$("a.twipsy").twipsy();
});

Notice Twitters jQuery Twipsies, this tool is derived from, offers event delegation out of the box, which is currently not implemented in the mootools version.