Tooltip
Non-actionable, brief informative message or tip. Tooltips are user-triggered to give extra information that is contextual but not critical to a user’s journey. Tooltips are initiated in one of three ways: hover, focus or press.
On this page
Import
Tooltip
Info Tooltip
Props
Tooltip Props
| Name | Description | Default |
|---|---|---|
| id* | A unique id for the tooltip. Required to make the tooltip accessible. string | - |
| isOpen | Controls the open state of the tooltip (controlled). boolean | - |
| defaultIsOpen | Controls the default open state of the tooltip (uncontrolled). boolean | - |
| onIsOpenChange | A callback that is called when the tooltip's open state changes (controlled). ((open: boolean) => void) | - |
| disableHover | Disables opening the tooltip on hover. boolean | - |
| placement | Controls the default placement of the tooltip in relation to the trigger element. Placement | - |
| children | The trigger and content of the tooltip. ReactNode | - |
| shouldCreatePortal | Uses React portals to render tooltip content in the document body to avoid clipping content boolean | false |
Tooltip Trigger Props
| Name | Description | Default |
|---|---|---|
| children* | The element that triggers the tooltip to open. Must be a button to remain accessible. ReactElement<any, string | JSXElementConstructor<any>> | - |
Tooltip Content Props
| Name | Description | Default |
|---|---|---|
| children | The content of the tooltip. ReactNode | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.