Tooltips

Tooltips provide contextual information about a particular element.

Top

<!-- This will display by default because of the opacity: 1 override -->
<div class="tooltip top" role="tooltip" style="opacity: 1;">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Tooltip on the top
  </div>
</div>

Bottom

<!-- This will display by default because of the opacity: 1 override -->
<div class="tooltip bottom" role="tooltip" style="opacity: 1;">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Tooltip on the bottom
  </div>
</div>

Left

<!-- This will display by default because of the opacity: 1 override -->
<div class="tooltip left" role="tooltip" style="opacity: 1;">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Tooltip on the left
  </div>
</div>

Right

<!-- This will display by default because of the opacity: 1 override -->
<div class="tooltip right" role="tooltip" style="opacity: 1;">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Tooltip on the right
  </div>
</div>

Wrap

<!-- This will display by default because of the opacity: 1 override -->
<div class="tooltip bottom tooltip--wrap" role="tooltip" style="opacity: 1; padding-bottom:50px:">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
  You have been accepted at Hogwarts School of Witchcraft and Wizardry. Sign up at harryjamespotter@hogwartsschool.com
  </div>
</div>

Description

This pattern is used when you need to ensure the text will wrap within a tooltip.

Do

  • Limit the amount of copy in a tooltip
  • Pair tooltips with appropriate icons

Don't

  • Overuse tooltips within a component

Accessibility

  • The tooltip should have have role="tooltip"
  • The parent element associated with the tooltip should have an aria-describedby