TooltipTooltip

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

Tooltip overviewTooltip overview

The tooltip widget structureThe 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 widgetOptions 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 tooltipDefault tooltip

Show tooltip 

  <span data-widget="tooltip" tabindex="0" role="button" aria-controls="toggle-pane-0" aria-describedby="toggle-pane-0" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden" aria-hidden="true" id="toggle-pane-0" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


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

Tooltip on specific eventsTooltip on specific events

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

Click tooltipClick tooltip

Show tooltip 

  <span data-widget="tooltip" data-event="click" tabindex="0" role="button" aria-controls="toggle-pane-1" aria-describedby="toggle-pane-1" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden" aria-hidden="true" id="toggle-pane-1" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


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

Double-click tooltipDouble-click tooltip

Show tooltip 

  <span data-widget="tooltip" data-event="dblclick" tabindex="0" role="button" aria-controls="toggle-pane-2" aria-describedby="toggle-pane-2" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden" aria-hidden="true" id="toggle-pane-2" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


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

Tooltip with custom targetsTooltip with custom targets

Via aria-describedby with a list of target idsVia aria-describedby with a list of target ids

Show tooltip 

  <span data-widget="tooltip" aria-describedby="tooltip1" tabindex="0" role="button" aria-controls="tooltip1" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div id="tooltip1" class="hidden" aria-hidden="true" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


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

Via data-tooltipVia data-tooltip

Show tooltip 

  <span data-widget="tooltip" data-tooltip="Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit." tabindex="0" role="button" aria-controls="toggle-pane-3" aria-describedby="toggle-pane-3" class="ui-tooltip ui-toggle">Show tooltip</span><span class="hidden" aria-hidden="true" id="toggle-pane-3" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</span>


  <!-- 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)Via data-target with a css selector to the targets (relative to parent)

Show tooltip
Will not be toggled.

  <div>
    <span data-widget="tooltip" data-target=".awesome-panels" tabindex="0" role="button" aria-controls="toggle-pane-4 toggle-pane-5" aria-describedby="toggle-pane-4" class="ui-tooltip ui-toggle">Show tooltip</span>
    <div class="awesome-panels hidden" aria-hidden="true" id="toggle-pane-4" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>
    <div class="awesome-panels hidden" aria-hidden="true" id="toggle-pane-5" role="tooltip">Nulla At Nulla Justo, Eget Luctus Tortor. Nulla Facilisi.</div>
  </div>
  <div class="awesome-panels">Will not be toggled.</div>


  <!-- 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)Via href with reference to element id (single target only)

Show tooltip
Will not be toggled.

  <a href="#tooltip3" data-widget="tooltip" tabindex="0" role="button" aria-controls="tooltip3" aria-describedby="tooltip3" class="ui-tooltip ui-toggle">Show tooltip</a>
  <div class="awesome-panels">Will not be toggled.</div>
  <div id="tooltip3" class="hidden" aria-hidden="true" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


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

Overlay tooltipOverlay tooltip

Show tooltip 

  <span data-widget="tooltip" data-overlay="true" tabindex="0" role="button" aria-controls="toggle-pane-6" aria-describedby="toggle-pane-6" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden ui-overlay" aria-hidden="true" id="toggle-pane-6" role="tooltip" style="z-index: initial;">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


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