components
Tooltip (code)
A tooltip is a floating label that provide a brief explanation about a specific user interface element. It can be triggered when users hover or focus.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | Node | - | - | The trigger target of the tooltip. |
| defaultVisible | Boolean | false | - | The initial visibility state of the tooltip |
| id | String | - | true | Native HTML id attribute. Will also affect the describedby-id. For accessibility reasons. |
| label | String | - | - | Text displayed within the tooltip |
| placement | 'auto''auto-start''auto-end''top''top-start''top-end''bottom''bottom-start''bottom-end''right''right-start''right-end''left''left-start''left-end' | 'top' | - | Where is the Tooltip positioned towards the target element. |
| usePortal | Boolean | false | - | Whether to use React.createPortal for creating tooltip. |
System Props
This component does not allow any system props.
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Children
default: <Icon />
The children you provide to the component, will be the elements that are wrapped by the tooltip. If no children are provided, the component will fallback to an information-icon.
Label
default: undefined
The label is the text that is displayed inside the tooltip.
Placement
default: top
You can also change the placement of the label.
Note: this only sets the default placement. If it's placement would fall outside of the window (e.g. when scrolled to the bottom), it will adapt accordingly.
UsePortal
default: false
Renders the tooltip in a portal, primarely used in Dialogs.