fun-portal-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.
This tooltip is rendered in a portal. It can be useful as an alternative to fun-tooltip 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 this component 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.
This component is not rendered in the shadow DOM and styles can leak in from outside.
Examples
Specifications
Properties
| Property | Attribute | Required | Description | Type | Default |
|---|---|---|---|---|---|
| delay | delay | false | Wait this number of milliseconds before showing the tooltip. | number | 200 |
| disabled | disabled | false | Use to inactivate the tooltip. | boolean | false |
| maxW | max-w | false | Set max width of tooltip. Defaults to m-w-xs (20rem / 320px) | number | |
| offsetX | offset-x | false | Add horizontal spacing between the tooltip and the trigger element. | number | 10 |
| offsetY | offset-y | false | Add vertical spacing between the tooltip and the trigger element. | number | 20 |
| portalId | portal-id | false | The ID of the portal element to render the tooltip in. | string | |
| position | position | false | Position of the tooltip, relative to the trigger element. | "bottom" | "left" | "right" | "top" | |
| positionStrategy | position-strategy | false | Use to override the positioning strategy, which can be helpful in some conditions. | "absolute" | "fixed" | 'absolute' |
Dependencies
This documentation page generated from the source at fun-portal-tooltip.tsx
