# Tooltip

Hint bubble with an arrow that appears when you long-press a control. The rest of the screen dims while the control stays highlighted, then the hint fades away in place.

> Composed · Free · Overlays — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add tooltip
```

## Import

```tsx
import { Tooltip } from "@/components/ui/tooltip/tooltip";
```

## Variants

- `eta` — Eta: `npx @lumioui/cli add tooltip-eta`
- `fees` — Fees: `npx @lumioui/cli add tooltip-fees`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `content` | `string` | Tooltip text shown above the wrapped element. |
| `children` | `React.ReactNode` | Wrapped element; long-press reveals the tooltip. |
| `dismissDelay?` | `number` | Auto-dismiss delay in ms. Default 2000. |
| `className?` | `string` | Extra classes for the tooltip bubble. |
| `side?` | `"top" | "bottom"` | Preferred side of the trigger. Flips when it doesn't fit. Default "top". |
| `open?` | `boolean` | Controlled visibility. Omit to let long-press + auto-dismiss manage it. |
| `onOpenChange?` | `(open: boolean) => void` | — |

Source: https://lumioui.com/components/tooltip