Tooltip names or explains its trigger in a short label, shown on hover and keyboard focus (tap on touch screens). It is a Popover in the inverse colors with role="tooltip", and takes the same props.

#Demos

#Basic

Put the tooltip on the element it describes. For an icon-only button it is the visible name; still give the button an aria-label.

#Long text and no arrow

Long tips wrap at 280px. showArrow={false} drops the arrow.

#With a Popover on the same button

A tooltip and a popover can share one trigger: the click opens the popover, hovering still shows the tooltip.

#Props

Tooltip takes every Popover prop; content is the tip. The defaults differ only in what they draw: inverse colors, a smaller size and a 280px maximum width. Any other prop, and ref, goes to the trigger.

The trigger gets aria-describedby pointing at the tooltip, so screen readers announce the tip after the trigger’s name.