Tooltip

A popup displaying additional text information.

How to

Tooltips are popups that can be used to display additional text information related to an element when it is hovered or focused.

If you want to add a tooltip to an element of your page (e.g., a button or a text element), add the js-tooltip-trigger class to that element. The title attribute of the trigger is used as the content of the tooltip.

Use these data attributes on the trigger element to customize the tooltip behaviour:

• data-tooltip-position: change the placement of the tooltip. Possible values are: top, bottom, left, right (default is top).
• data-tooltip-class: add a list of custom classes to the tooltip element:

<span class="tooltip-trigger js-tooltip-trigger" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit." data-tooltip-class="tooltip--lg">the stars</span>

For example, if you want the tooltip to remain visible when hovering hover the tooltip, you can use the .tooltip--sticky class:

<span class="tooltip-trigger js-tooltip-trigger" title="Lorem ipsum dolor." data-tooltip-class="tooltip--sticky">the stars</span>

You can also pass a list of classes (separated by spaces, for example "tooltip--sticky tooltip--lg").

• data-tooltip-delay: change the visibility delay of the tooltip (value in milliseconds). Default is 300.
• data-tooltip-gap: distance between the tooltip and the trigger (value in px). Deafult is 10.

HTML Content #

If you want to include HTML content inside your tooltip, use the data-tooltip-title attribute (rather than the default title attribute):

<span class="tooltip-trigger js-tooltip-trigger" data-tooltip-title="<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong>" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">the stars</span>

Display tooltip at a specific breakpoint #

If you want the tooltip to be visible only after a certain breakpoint, for example the medium breakpoint, you can do one of the followings:

• Modify the SCSS of the component and apply the display property inside the md media query:

.tooltip { /* tooltip element - created using js */
  position: absolute;
  // ...

  @include breakpoint(md) {
    display: inline-block;
  }
}

• Use the data-tooltip-class attribute to add the display@md class to the tooltip:

<span class="tooltip-trigger js-tooltip-trigger" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit." data-tooltip-class="display@md">the stars</span>

Categories

• Overlays

Bug report & feedback

Component Github page ↗