Tooltip
A tooltip is a small pop-up box that appears when a user hovers over an element, providing additional information or context.
Usage
Get information from something that has a very long description.
Positioning
You can position the tooltip relative to the target element using the position prop.
Top position
Right position
Bottom position
Left position
Primitives
You can utilize the primitive components or the css prop to customize the checkbox.
| Component | Description |
|---|---|
| TooltipRoot | The context provider for the Tooltip parts |
| TooltipTrigger | The focusable element that triggers the tooltip on hover |
| TooltipPositioner | The positioning container for the tooltip |
| TooltipContent | The content of the tooltip |
| TooltipArrow | The arrow container of the tooltip bubble |
| TooltipArrowTip | The tip of the arrow |
API
Props
The Tooltip component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| content | What to display in the Tooltip. |
The Tooltip component also accepts all the props of the TooltipRoot primitive props
Parts
The TooltipParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The TooltipRoot component. |
| Trigger | The TooltipTrigger component. |
| Positioner | The TooltipPositioner component. |
| Content | The TooltipContent component. |
| Arrow | The TooltipArrow component. |
| ArrowTip | The TooltipArrowTip component. |
On this page