Tooltip

The tooltip component has an option to position the tooltip above or below the trigger (above by default).

The styles and positioning is handled with CSS and JS. By default, the tooltip will be centered on the trigger, but if the tooltip goes beyond the viewport edges, it is re-positioned to remain in the visible browser screen.

Resize your browser to see the tooltip behaviour on smaller screen (near the viewport top/right/bottom/left edges).

There is no mechanism to prevent tooltip with too much content, and it might not be fully visible in that case. Tooltips should be for small, limited amount of text, not huge page of content.

With buttons

<!-- Tooltip -->
<!-- tooltip works by adding a data-attribute to any element (btn, link...) -->

<!-- tooltip default positioned above trigger -->
<button class="ui-btn" data-tooltip="...">...</button>

<!-- tooltip positioned below -->
<button class="ui-btn" data-tooltip="..." data-tooltip-position="bottom">...</button>

Within text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid architecto aut consectetur dolore dolores eligendi eos eveniet ex incidunt natus, quam, quidem quo temporibus, veritatis vero voluptatum. Pariatur, veniam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid architecto aut consectetur dolore dolores eligendi eos eveniet ex incidunt natus. Quam, quidem quo temporibus, veritatis vero voluptatum. Pariatur, veniam?

<!-- inside text -->
<p>..........<a class="ui-link--inline" href="#" data-tooltip="...">...</a>..........</p>

With icons

Lorem ipsum dolor sit amet 

Lorem ipsum dolor sit amet, consectetur adipisicing elit  emit. Ab aliquid architecto aut consectetur dolore dolores  eligendi eos eveniet ex incidunt natus. Quam, quidem quo temporibus, veritatis vero voluptatum. Pariatur, veniam?

<!-- icons -->
<span data-tooltip="...">
  <i class="ui-icon ui-icon--question></i>
</span>

With HTML markup

Deprecated
Tooltip with HTML markup is now deprecated. Please use tooltip with icons instead.

Lorem ipsum dolor sit amet 

<!-- HTML tooltip markup -->
<!-- data-tooltip is still required for the javascript plugin to create an instance -->
<!-- a specific data-tooltip-id is required to point to the element which holds the HTML -->
<span class="ui-tooltip-icon" data-tooltip="" data-tooltip-id="tooltip-001">
  <i class="ui-icon ui-icon--question"></i>
</span>

<!-- tooltip html markup -->
<!-- the ID must match the one in the tooltip trigger -->
<!-- the data-tooltip-content is required for JS and CSS styling purpose -->
<div data-tooltip-content="" id="tooltip-001">
  ...
</div>