# Tooltip

A short label that names a control on hover, focus or long press, in Ink, Soft or a rich tab shape.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/tooltip
```

## Usage

```tsx
import { Tooltip } from '@/components/fetaui/tooltip'
import { IconButton } from '@/components/fetaui/icon-button'
import { StarIcon } from '@fetaui/react/rounded/star'

export function Example() {
  return (
    <Tooltip content="Add to library" shortcut={['⌘', 'L']} labels>
      <IconButton label="Add to library" icon={<StarIcon />} />
    </Tooltip>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| content | ReactNode | required |
| children | ReactElement | required |
| tone | ink, soft | ink |
| side | top, bottom, left, right | top |
| shortcut | string[] |  |
| icon | ReactNode or true |  |
| delay | number | 600 |
| labels | boolean | false |
| open | boolean |  |
| defaultOpen | boolean | false |
| onOpenChange | (open) => void |  |
| disabled | boolean | false |
| animated | boolean | true |
| TooltipRich title | ReactNode | required |
| TooltipRich description | ReactNode |  |
| TooltipRich actions | ReactNode |  |
| TooltipRich loading | boolean | false |

## When to use

- To name an icon only control or show its shortcut.
- Rich for one short explanation with at most one action.
- TooltipTruncated for text that may cut off.

## When not to use

- For the only copy of important information.
- For interactive content in a plain tooltip.
- For more than one action: use Popover.

## Accessibility

- role tooltip, tied to the trigger with aria-describedby, or aria-labelledby when `labels` is set.
- It stays open while the pointer is over it, so it can be read and selected.
- A disabled button cannot take hover: wrap it in TooltipDisabledTrigger.
- Mobile shows on long press and hides 1.5 s after release.

## Motion

- Shows in 140 ms from 0.96 and 4 px toward the trigger, with its origin at the nub. Hides with a 90 ms fade.
- Inside the 300 ms skip window a neighbour shows at once and glides over on a 500/36 spring.
- Rich unfolds the tab, then the tray 40 ms later.
- With reduced motion, it appears in place. The loading shimmer holds still.