Honeycomb

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

When To Use

  • To provide additional context on hover or focus.
  • For icon-only buttons that need labels.
Basic
Hover over the button to see the tooltip.
Side Positioning
Tooltips positioned on different sides of the trigger.
With Keyboard Shortcut
Tooltip displaying a keyboard shortcut using the Kbd component.
Disabled Button
Tooltip on a disabled button by wrapping it in a span.