# Tooltip

> Short, non-interactive hint for a control.

Source: https://ui.jcsoftdev.com/docs/components/tooltip

Short, non-interactive hint for a control. Opens on hover (after `openDelay`) and on keyboard
focus, closes on Escape, blur, press and pointer leave. Touch never opens it by hover, so a tap
always reaches the control. The trigger is described by it (`aria-describedby`), and the
tooltip never takes focus.

## Import

```ts
import { Tooltip } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/tooltip`.

## Usage

```tsx
<Tooltip content="Save changes" openDelay={50} closeDelay={0}>
  <Button>Save</Button>
</Tooltip>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` * | `ReactNode` |  | The hint. It repeats or complements the trigger's name; never put information only here. |
| `shortcut` | `ReactNode` |  | Keyboard shortcut shown next to the hint, rendered as a `Kbd`. |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` |  |
| `align` | `"center" \| "end" \| "start"` | `"center"` |  |
| `sideOffset` | `number` | `6` | Gap between the trigger and the tooltip, in px. |
| `openDelay` | `number` | `300` | ms the pointer must rest on the trigger before the tooltip opens. Keyboard focus opens at once. |
| `closeDelay` | `number` | `100` | ms before closing after the pointer leaves, so it can travel onto the tooltip (WCAG 1.4.13). |
| `open` | `boolean` |  | Controlled open state. |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `((open: boolean) => void)` |  |  |
| `disabled` | `boolean` | `false` | Never show the tooltip, e.g. when the label is already visible. |
| `container` | `HTMLElement \| null` |  | Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. |
| `material` | `"solid" \| "glass" \| "glass-clear" \| "liquid" \| "liquid-clear"` |  | Surface material; see `PopoverContent`. |
| `className` | `string` |  |  |
| `classNames` | `Partial<Record<TooltipPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the content and is merged last. |
| `children` * | `ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | The element that gets the tooltip. It receives `aria-describedby` while the tooltip is open. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/overlays-tooltip--default)
- [With Shortcut](/storybook/?path=/story/overlays-tooltip--with-shortcut)
- [Sides](/storybook/?path=/story/overlays-tooltip--sides)
- [Opens On Keyboard Focus And Closes On Escape](/storybook/?path=/story/overlays-tooltip--opens-on-keyboard-focus-and-closes-on-escape)
- [Waits For The Open Delay](/storybook/?path=/story/overlays-tooltip--waits-for-the-open-delay)
- [Press Closes And Does Not Reopen](/storybook/?path=/story/overlays-tooltip--press-closes-and-does-not-reopen)
- [Touch Never Opens By Hover](/storybook/?path=/story/overlays-tooltip--touch-never-opens-by-hover)
- [Disabled](/storybook/?path=/story/overlays-tooltip--disabled)
- [Controlled](/storybook/?path=/story/overlays-tooltip--controlled)
- [In Spanish](/storybook/?path=/story/overlays-tooltip--in-spanish)

## Source

`packages/ui/src/overlays/tooltip/tooltip.tsx`