Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Installation
npm i @huin-core/react-tooltipAPI Reference
TooltipProvider
| Prop | Type | Description |
|---|---|---|
| delayDuration | number | Specifies the amount of time to wait before an action or effect is triggered, often used to control the timing of interactions or animations. |
| skipDelayDuration | number | How much time a user has to enter another trigger without incurring a delay again. |
| disableHoverableContent | boolean | Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. |
Tooltip
| Prop | Type | Description |
|---|---|---|
| defaultOpen | boolean | Determines whether the component should be open by default when it is initially rendered. |
| open | boolean | Controls the open state of the component. When set to true, the component is displayed; when false, it is hidden. |
| disableHoverableContent | boolean | Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. |
| delayDuration | number | Specifies the amount of time to wait before an action or effect is triggered, often used to control the timing of interactions or animations. |
| onOpenChange | function | Event handler called when the open state of the component changes. |
TooltipTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
TooltipPortal
| Prop | Type | Description |
|---|---|---|
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
TooltipContent
| Prop | Type | Description |
|---|---|---|
| side | "top" | "right" | "bottom" | "left" | The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. |
| align | "center" | "start" | "end" | Defines the alignment of the component, determining its position relative to other elements or within its container. |
| sticky | "partial" | "always" | The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
| avoidCollisions | boolean | When true, overrides the side andalign preferences to prevent collisions with boundary edges. |
| hideWhenDetached | boolean | Whether to hide the content when the trigger becomes fully occluded. |
| sideOffset | number | The distance in pixels from the anchor. |
| alignOffset | number | An offset in pixels from the 'start' or 'end' alignment options. |
| collisionPadding | number | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. |
| arrowPadding | number | The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. |
| onEscapeKeyDown | function | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | function | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault |
TooltipArrow
| Prop | Type | Description |
|---|---|---|
| width | number | The width of the piece in pixels. |
| height | number | The width of the height in pixels. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
Keyboard Interactions
| Key | Description |
|---|---|
Tab | Focusing the trigger shows the tooltip. |
Esc | Dismisses the tooltip. |