//
A popup that displays information related to an element when the user focuses or hovers over it.
bun add xiod-ui1import {2 Tooltip,3 TooltipArrow,4 TooltipContent,5 TooltipPopup,6 TooltipCreateHandle,7 TooltipProvider,8 TooltipTrigger9} from "xiod-ui/tooltip";1<Tooltip>2 <TooltipTrigger />3 <TooltipContent>4 <TooltipArrow />5 <TooltipPopup />6 <TooltipProvider />7 </TooltipContent>8</Tooltip>| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: TooltipArrowState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: TooltipArrowState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, TooltipArrowState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: TooltipPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, TooltipPopupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: TooltipPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
align | Align| undefined | center | |
side | Side| undefined | top | |
sideOffset | number| OffsetFunction| undefined | 10 | |
anchor | Element| VirtualElement| RefObject<Element| null>| (() => Element| VirtualElement| null)| null| undefined | - | |
hideArrow | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
delay | number| undefined | - | How long to wait before opening the tooltip on hover. Specified in milliseconds. |
closeDelay | number| undefined | - | How long to wait before closing a tooltip. Specified in milliseconds. |
timeout | number| undefined | 400 | Another tooltip will open instantly if the previous tooltip is closed within this timeout. Specified in milliseconds. |
| Prop | Type | Default | Description |
|---|---|---|---|
handle | TooltipHandle<unknown>| undefined | - | A handle to associate the trigger with a tooltip. |
payload | unknown | - | A payload to pass to the tooltip when it is opened. |
delay | number| undefined | 600 | How long to wait before opening the tooltip on hover. Specified in milliseconds. |
closeOnClick | boolean| undefined | true | Whether the tooltip should close when this trigger is clicked. |
closeDelay | number| undefined | 0 | How long to wait before closing the tooltip. Specified in milliseconds. |
disabled | boolean| undefined | false | If `true`, the tooltip will not open when interacting with this trigger. Note that this doesn't apply the `disabled` attribute to the trigger element. If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop. |
className | string| ((state: TooltipTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, TooltipTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: TooltipTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |