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


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


  • 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.



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.