# Tooltip A short label that appears beside its trigger on hover and keyboard focus, for an icon button's purpose or a control's shortcut. It never opens on touch, and screen readers don't read it, so it only repeats or adds to what the page already says. Inside `OuroProvider`, tooltips share one delay: once one shows, its neighbours open instantly. ```tsx import { Tooltip } from "@/components/ouro/tooltip/tooltip"; ``` ## Example ```tsx } > ``` ## Usage It stacks above the page at `--ouro-layer`, a z-index of 50 by default (from ouro-base.css), like Dialog and Sheet. ## Use instead when - Use `Popover` instead for anything the user needs or can act on (it opens on tap and holds controls), `HoverCard` for a preview of a link, and plain text on the page for essential information. ## Props Type: `TooltipProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `align` | `"start" \| "center" \| "end"` | `"center"` | How the tooltip lines up with the trigger along that side. | | `children` (required) | `ReactElement` | | The trigger: one element that can take focus, usually a Button. It needs a name of its own; give an icon-only button `aria-label`. | | `content` (required) | `ReactNode` | | A short label for the trigger, a few words: "Add to cookbook". It shows on hover and keyboard focus, never on touch, and screen readers don't read it, so it must never hold anything the user needs. | | `side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | The side of the trigger the tooltip sits on; it flips when there is no room. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `asChild`: Not a prop. The child is the trigger: `…`. - `delay`: Not a prop. Ouro UI sets the delay, and `OuroProvider` groups tooltips so neighbours open instantly. - `delayDuration`: Not a prop. Ouro UI sets the delay, and `OuroProvider` groups tooltips so neighbours open instantly. - `placement`: Not a prop. Ouro UI splits placement into `side` and `align`: ``. - `title`: Not a prop. The text is `content`: ``.