Tooltip
Tooltips are commonly used to give more information about an icon or button when the user hovers over it. Bear in mind that touch users cannot see tooltips.
The tooltip can also rendered in a portal. It can be useful as an alternative when rendered in a complex layout that uses transforms or absolute positioning or other floating elements, to ensure that the tooltip is rendered on top of other content and in the right position.
To use a portal you must have an element in your layout with an ID. It is strongly recommended to put this element after
all other content on your page. The ID of that element should be used as the portalId prop for the tooltip.
Examples
Specifications
Properties
| Property | Attribute | Required | Description |
|---|---|---|---|
| delay | delay | Wait this number of milliseconds before showing the tooltip. | |
| disabled | disabled | Use to inactivate the tooltip. | |
| maxW | max-w | Set max width of tooltip. Defaults to m-w-xs (20rem / 320px) | |
| offsetX | offset-x | Add horizontal spacing between the tooltip and the trigger element. | |
| offsetY | offset-y | Add vertical spacing between the tooltip and the trigger element. | |
| position | position | Position of the tooltip, relative to the trigger element. | |
| positionStrategy | position-strategy | Use to override the positioning strategy, which can be helpful in some conditions. |
