Tooltips

The template includes a complete and powerful tooltip functionality:

  • 4 positions: top, left, bottom and right
  • When tooltips are too close to the screen border, they are moved to avoid crop
  • Easy configuration through classes or inline options - no script required
  • Tooltips can contain any content, including existing DOM content or generated DOM elements (using jQuery)
  • Tooltips can be used as menus (see below)
  • A confirmation plugin is available using tooltips (see below)

Standard tooltips

Top

Right

Left

Bottom

Customized tooltips

Color

Custom content

Delay

Changing content

Tooltips API

  • 17 options to tweak every aspect of the tooltip
  • Older tooltips on the same element are automatically removed
  • onShow and onRemove callbacks
  • Some tooltips can be exclusive over the page - only the last one will be right open
  • Tooltips can prevent closing in the onRemove callback
  • And much more...

Example menu

The tooltip plugin provides a menu functionality: when the user clicks the desired element, a tooltip is displayed with any custom content (it may be a menu or anything else), and it closes when the user clicks anywhere else.

$('#menu-tooltip').menuTooltip($('#menu-content-block'));

In this example, the content is pulled from the DOM just by giving the corresponding jQuery selection to the function. It is detached from its original location, shown as it was hidden, and when the menu closes, it is re-inserted into its original location and hidden back. No complex callbacks, everything is built-in - but of course, the tooltips callbacks can be used if needed.

Confirmation plugin

This plugin display a confirmation tooltip over any clicked element with the class confirm: if the user clicks Confirm then the link is opened, otherwise it is blocked.

  • John Krazinski
  • John Debogorsky
  • John Hutter

Several configuration options and callbacks are available to get the exact desired look and behavior.