# components/Tooltip (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/Tooltip.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/Tooltip.tsx).

## Components

### `Tooltip`

Component.

Renders a small label that fades in under or above its trigger on hover or keyboard focus.
The first one waits about 400 ms so a passing cursor never flashes it, a following one
within 600 ms opens at once, and focus opens it immediately. Pressing the trigger or Esc
hides it until the pointer and focus leave. The bubble describes the trigger through
`aria-describedby` and is not interactive.

```ts
function Tooltip(props: TooltipProps): Element
```

**Parameters**

- `props` (`TooltipProps`): Component props.

**Returns** `Element`

**Props**

- `align?` (`'end' | 'center'`): Horizontal anchor. `end` right-aligns the bubble with the trigger's right edge.
- `children` (`ReactNode`): The trigger. Hovering it, or keyboard focus on it, shows the tooltip.
- `className?` (`string`): Extra classes on the wrapping element.
- `disabled?` (`boolean`): Never opens, while the trigger's own surface is open (a popover over the same spot).
- `label` (`ReactNode`): The tooltip content. Keep it short.
- `maxWidth?` (`number`): Wrap long labels at this width (px) instead of one line.
- `portal?` (`boolean`): Render the bubble into `document.body` with fixed positioning instead of
  inside the host. Needed when the host sits in an `overflow` container
  (a scrolling list) that would otherwise clip the bubble. Position is
  measured when it opens; the same enter motion applies.
- `side?` (`'bottom' | 'top'`): Where the bubble sits relative to the trigger.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Tooltip.tsx:91](https://github.com/Tahul/zidane/blob/main/ui/src/components/Tooltip.tsx#L91)

## Interfaces

### `TooltipProps`

Interface.

Props for [`Tooltip`](https://zidane.si/docs/reference/ui-components-tooltip.md#Tooltip).

```ts
interface TooltipProps
```

**Properties**

- `align?` (`'end' | 'center'`): Horizontal anchor. `end` right-aligns the bubble with the trigger's right edge.
- `children` (`ReactNode`): The trigger. Hovering it, or keyboard focus on it, shows the tooltip.
- `className?` (`string`): Extra classes on the wrapping element.
- `disabled?` (`boolean`): Never opens, while the trigger's own surface is open (a popover over the same spot).
- `label` (`ReactNode`): The tooltip content. Keep it short.
- `maxWidth?` (`number`): Wrap long labels at this width (px) instead of one line.
- `portal?` (`boolean`): Render the bubble into `document.body` with fixed positioning instead of
  inside the host. Needed when the host sits in an `overflow` container
  (a scrolling list) that would otherwise clip the bubble. Position is
  measured when it opens; the same enter motion applies.
- `side?` (`'bottom' | 'top'`): Where the bubble sits relative to the trigger.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Tooltip.tsx:29](https://github.com/Tahul/zidane/blob/main/ui/src/components/Tooltip.tsx#L29)