Tooltip
Floating labels that briefly explain the function of a user interface element.Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | The trigger for your tooltip. Hovering or focusing on this element will show the tooltip. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
label | ✅ | The text content inside the tooltip. | string |
nonInteractiveChild | — | Use when your tooltip trigger (children) is not a button or link element. When true, will wrap children of the tooltip in a <div tabindex="0" /> to enable keyboard accessibility and ensure that the primitive can inject props like data-state (controls the open state) and aria-describedby (screen reader a11y) onto it. Defaults to false. | boolean |
side | — | The preferred side of the trigger to render against when open. Will be reversed when collisions occur and forcePosition is enabled. Defaults to bottom. | "top" | "right" | "bottom" | "left" |
align | — | The preferred alignment against the trigger. May change when collisions occur. Defaults to center. | "start" | "center" | "end" |
forcePosition | — | When true, it will force the tooltip to its side and align positioning, and ignore any adjustments when collisions with the viewport boundaries happen. Defaults to false. | boolean |
ariaHidden | — | Hides the tooltip label from assistive technologies. Defaults to true. | boolean |