# Tooltip

Brief text help on hover or focus, with collision-aware placement.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Tooltip, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Tooltip content="Additional context" trigger={trigger => <Button {...trigger}>Hover or focus</Button>} />
    </FloodRoot>
  );
}
```

## Design notes

- Requires native Popover API.
- Forward trigger props and ref to one actual button. Tooltip is text-only; interactive content belongs in Popover.
- Escape dismisses. Hover can move onto the tooltip; focus stays on the trigger. Do not use it as the only accessible name or essential instruction.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `content` | `string` | `Required` |
| `trigger` | `(props: OverlayTriggerProps) => ReactNode` | `Required` |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` |
| `align` | `"start" \| "center" \| "end"` | `"center"` |
| `delay` | `number` | `300` |
| `disabled` | `boolean` | `false` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "content" \| "title" \| "role">` | `Forwarded` |