46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. Tooltip
|
|
|
|
# Tooltip
|
|
|
|
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
|
|
|
|
[Docs](https://www.radix-ui.com/primitives/docs/components/tooltip)[API Reference](https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference)## Props
|
|
|
|
### Tooltip
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| ...Radix props | ComponentProps<typeof TooltipPrimitive.Root> | - | All Radix tooltip root props |
|
|
|
|
### TooltipContent
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| sideOffset | number | 0 | Offset in pixels from the trigger |
|
|
| ...Radix props | ComponentProps<typeof TooltipPrimitive.Content> | - | All Radix content props |
|
|
|
|
## Usage
|
|
|
|
Top Left Right Bottom ```jsx
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Top</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" align="start">
|
|
<p>Add to library</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
```
|
|
|
|
### Example
|
|
|
|
```jsx
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Hover</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">Hello</TooltipContent>
|
|
</Tooltip>
|
|
``` |