Tooltip Icon Button
A button that is only a glyph, and the tooltip that names it — required, so a row of unnamed buttons cannot happen by forgetting.
01Preview
0102Installation
npx shadcn@latest add https://aiellie.app/r/tooltip-icon-button.json03API reference
09From the Base UI documentation
Groups all parts of the tooltip. Doesn't render its own HTML element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | false | Whether the tooltip is initially open. To render a controlled tooltip, use the open prop instead. |
| open | boolean | - | Whether the tooltip is currently open. |
| onOpenChange | ((open: boolean, eventDetails: Tooltip.Root.ChangeEventDetails) => void) | - | Event handler called when the tooltip is opened or closed. |
| actionsRef | React.RefObject<Tooltip.Root.Actions | null> | - | A ref to imperative actions. unmount: Unmounts the tooltip popup.close: Closes the tooltip imperatively when called. |
| defaultTriggerId | string | null | - | ID of the trigger that the tooltip is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open tooltip. |
| handle | Tooltip.Handle<Payload> | - | A handle to associate the tooltip with a trigger. If specified, allows external triggers to control the tooltip's open state. Can be created with the Tooltip.createHandle() method. |
| onOpenChangeComplete | ((open: boolean) => void) | - | Event handler called after any animations complete when the tooltip is opened or closed. |
| triggerId | string | null | - | ID of the trigger that the tooltip is associated with. This is useful in conjunction with the open prop to create a controlled tooltip. There's no need to specify this prop when the tooltip is uncontrolled (that is, when the open prop is not set). |
| trackCursorAxis | 'none' | 'x' | 'y' | 'both' | 'none' | Determines which axis the tooltip should track the cursor on. |
| disabled | boolean | false | Whether the tooltip is disabled. |
| disableHoverablePopup | boolean | false | Whether the tooltip contents can be hovered without closing the tooltip. |
| children | React.ReactNode | PayloadChildRenderFunction<Payload> | - | The content of the tooltip. This can be a regular React node or a render function that receives the payload of the active trigger. |