Tooltip

Tooltip shows a short label next to an element when the pointer rests on it or keyboard focus reaches it.

import Tooltip from '@hone-ui/react/Tooltip';

Examples

<Tooltip title="Delete">
  <Button>Hover or focus me</Button>
</Tooltip>

Prop	Type	Default	Description
`title`	`ReactNode`		The label. Empty shows nothing.
`children`	element		One focusable element.
`arrow`	`boolean`	`false`	Draws an arrow.
`placement`	`'bottom'`, `'top-start'`, … , `'right'`	`'bottom'`	Where it sits. It flips when there is no room.
`open`, `onOpen`, `onClose`			Controlled mode.
`describeChild`	`boolean`	`false`	Describes the child instead of naming it.
`enterDelay`, `leaveDelay`	`number`	`100`, `0`	Milliseconds before opening and closing.
`disableHoverListener`	`boolean`	`false`	Opens on keyboard focus only.
`disableInteractive`	`boolean`	`false`	Closes as the pointer leaves the child. By default the pointer can move onto the tooltip and keep it open (after a 100 ms grace, or `leaveDelay` if longer).
`slotProps.tooltip`, `slotProps.arrow`	object		Props for the bubble and the arrow.
`sx`, `className`, `style`, `ref`			Go to the bubble.

followCursor, disableFocusListener, disableTouchListener, PopperProps and TransitionComponent are not supported.
Touch does not open a tooltip, so don't put information only there.

Without describeChild, a text title becomes the child's aria-label. The bubble has role="tooltip", and Escape closes it.