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

Show tooltip
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.

  <!-- 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

Show tooltip
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.

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

Double-click tooltip

Show tooltip
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.

  <!-- 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

Show tooltip
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.

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

Via data-tooltip

Show 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)

Show tooltip
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
Nulla At Nulla Justo, Eget Luctus Tortor. Nulla Facilisi.
Will not be toggled.

  <!-- 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)

Show tooltip
Will not be toggled.
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.

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

Overlay tooltip

Show tooltip
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.

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