The tooltip widget allows showing an information popup when the mouse is moved over its trigger.

Tooltip overview

The tooltip widget structure

• trigger: the tooltip trigger, specified as:
  • element with data-widget="tooltip"
• tooltip: the tooltip content, specified as one of:
  • an aria-describedby attribute with a space-separated list of element ids to toggle
  • using the content of the data-tooltip option
  • using data-target option, specified as a jQuery selector relative to the widget, or its parent
  • using href attribute, specified as an id reference starting with #
  • the second child element of the toggle
  • the element that follows the toggle

Options for the tooltip widget

• data-event: what event to respond to (mouseenter mouseleave by default)
• data-overlay: whether to show the tooltip as an overlay

Events for the tooltip widget

• beforeToggle: triggered on the trigger and the tooltip elements before the toggle happens
• afterToggle: triggered on the trigger and the tooltip elements after the toggle happens

Both events have the following parameters:

• toggle: a reference to the trigger element
• targets: a reference to the tooltip elements
• status: a boolean indicating whether the targets are visible (true) or hidden (false)
• event: the actual event that triggered the toggle

Default tooltip

  <!-- trigger element -->
  <span data-widget="tooltip"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>
  

Tooltip on specific events

Using the data-event option, and specifying a valid jQuery event.

Click tooltip

  <!-- trigger element -->
  <span data-widget="tooltip" data-event="click"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>
  

Double-click tooltip

  <!-- trigger element -->
  <span data-widget="tooltip" data-event="dblclick"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>
  

Tooltip with custom targets

Via aria-describedby with a list of target ids

  <!-- trigger element -->
  <span data-widget="tooltip" aria-describedby="myId"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div id="myId"><!-- tooltip content --></div>
  

Via data-tooltip

  <!-- trigger element -->
  <span data-widget="tooltip" data-tooltip="tooltip content"><!-- trigger label --></span>
  

Via data-target with a css selector to the targets (relative to parent)

  <!-- trigger element -->
  <span data-widget="tooltip" data-target=".myClass"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div class="myClass"><!-- tooltip content --></div>
  

Via href with reference to element id (single target only)

  <!-- trigger element -->
  <a href="#myId" data-widget="tooltip"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div id="myId"><!-- tooltip content --></div>
  

Overlay tooltip

  <!-- trigger element -->
  <span data-widget="tooltip" data-overlay="true"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>