Tooltip - Keep React
Table of Contents#
- Default Tooltip
- Tooltip Arrow
- Tooltip Placement
- Tooltip Instantly Open
- API Reference
- Content API
- Provider API
- Reference
Default Tooltip#
Tooltips appear on hover over an element and help convey concise explanations, tips, or labels. By using the Default Tooltip, you can enhance user understanding and improve the overall usability of your interface.
Tooltip Arrow#
An optional arrow element to render alongside the tooltip. This can be used to help visually link the trigger with the TooltipContent. Must be rendered inside TooltipContent.
Tooltip Placement#
To set the placement of a tooltip, use the side prop with the desired value, such as "top","bottom","left" and "right".
Tooltip Instantly Open#
Use the delayDuration prop to control the time it takes for the tooltip to open.
API Reference#
Explore the available props for the tooltip component
| Property | Description | Type | Default |
|---|---|---|---|
| open | The controlled open state of the tooltip. | boolean | false |
| onOpenChange | Event handler called when the open state of the tooltip changes. | setState | null |
Content API#
Explore the available props for the tooltip content component
| Property | Description | Type | Default |
|---|---|---|---|
| side | Placement of the tooltip. | top bottom left right | top |
| align | The preferred alignment against the trigger. | start center end | center |
| alignOffset | The preferred side of the anchor to render against when open. | number | 10 |
| arrowPadding | The padding between the arrow and the edges of the content. | number | 0 |
Provider API#
Explore the available props for the tooltip provider component
| Property | Description | Type | Default |
|---|---|---|---|
| delayDuration | The duration from when the mouse enters a tooltip trigger until the tooltip opens. | number | 700 |
| skipDelayDuration | How much time a user has to enter another trigger without incurring a delay again. | number | 300 |
Reference#
Our modal component is built using the @radix-ui/react-tooltip package. For more information , follow the documentation @radix-ui/react-tooltip.