| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | ||
| hideDelay | number | false | ||
| initialIsVisible | boolean | false | Whether to show the overlay on initial render | |
| overlay | any | false | The tip we want to display | |
| placement | Placement | false | Determines the position of the arrow | |
| showDelay | number | false | ||
| style | CSSProperties | false | Additional CSS styles | |
| trigger | TriggerVariant | TriggerVariant[] | false | The event to trigger the overlay |
The Tooltip component wraps an element that will trigger a tooltip. An element that will result in an HTML element (not a string) is required, as this node will have the attached event listeners. To facilitate stacking context, a Tooltip should have one ZIndexProvider somewhere above in its tree.
If it is necessary to customize the content inside of the overlay, place your string and components inside a Tooltip.Content.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| placement | Placement | false | ||
| style | CSSProperties | false | Additional CSS styles |
If your tooltip trigger needs to know the state of the tooltip, Tooltip accepts a function as children.
Depending on the browser, disabled HTML inputs might not fire an event. Adding a span between the Tooltip and the input will allow a tooltip to appear on a disabled element.
Without span:
With span:
Additional classNames