Tooltip

Tooltip is a non-interactive overlay that briefly explains the function of the trigger element.

label

If you're looking for a simple tooltip, consider using the HTML title attribute instead.

#Functionality

  • Displayed when the trigger element is hovered by the mouse or when it receives keyboard focus.
  • Focus remains on the trigger element while the tooltip is displayed.
  • Dismissed with the Escape key or by navigating outside.
  • Has pre-defined positioning options, but should adjust itself dynamically based on collisions and available space.

#Best practices

  • Do not use a tooltip for information vital to task completion. The action of the element it is attached to should make sense on its own.
  • Make sure to provide a short and succinct label for the tooltip.
  • Avoid interactive content such as buttons and links inside the tooltip. As an alternative, consider Popover.
  • Displaying the tooltip too quickly on mouseover can result in accidental activations and creates a jarring user experience. It is advisable to add a short delay (~100ms) before displaying it.
  • Once a tooltip is visible, interaction with any other tooltip should display immediately without the delay.

#Implementation

#Positioning

To avoid parent containers possibly clipping the tooltip and its content, render the tooltip outside the DOM hierarchy of its parent component.

In React, a common mechanism for this is a Portal.

#Disabled elements

By default, disabled elements like <button> do not trigger mouse events.

This is an unfortunate misinterpretation of the spec by the browsers. As a workaround, we recommend using Pointer Events (which follow the spec more closely) for disabled trigger elements.

As an alternative, wrapping the disabled element in a <span> can also work since all of the mouse events would then be placed on it instead.