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>
```