# Tooltip

A short plain-text label on hover or focus, after a delay.

Source page: https://sproutboat.com/ikada/components/tooltip

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/tooltip.json
```
Or from the package: `import { TooltipProvider, Tooltip } from "@sproutboat/ikada";`
## Usage
```tsx
import { TooltipProvider, Tooltip } from "@/components/ikada/tooltip";

<Tooltip content="Roll back to v47">
  <Button>Roll back</Button>
</Tooltip>
```
## Examples
### Default
Short plain text on hover or focus, after a delay. Anything interactive belongs in a Popover.
```tsx
<Tooltip content="Roll back to v47">
  <Button>Roll back</Button>
</Tooltip>
```
### Sides

```tsx
<Tooltip content="Opens on the top" side="top">
  <Button>top</Button>
</Tooltip>
<Tooltip content="Opens on the bottom" side="bottom">
  <Button>bottom</Button>
</Tooltip>
<Tooltip content="Opens on the start" side="start">
  <Button>start</Button>
</Tooltip>
<Tooltip content="Opens on the end" side="end">
  <Button>end</Button>
</Tooltip>
```
### No delay
Skip the 450ms wait for a control that has no other label.
```tsx
<Tooltip content="Copy robin.sproutboat.app" delay={0}>
  <Button>Copy</Button>
</Tooltip>
```
## Props
### TooltipProps

| Prop | Type | Description |
| --- | --- | --- |
| content | `ReactNode` | Short plain text. Anything interactive belongs in a Popover. |
| children | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | The element that triggers the tooltip; it receives the trigger props. |
| side? | `"top" \| "bottom" \| "start" \| "end"` | Which side of the trigger the popup opens on. Flips when there is no room. Default `top`. |
| delay? | `number` | Milliseconds before it opens on hover. Default from TooltipProvider (450). |
| defaultOpen? | `boolean` | Whether it starts open (uncontrolled). |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/tooltip.tsx