---
title: Tooltip
description: Names an icon-only control on hover and focus.
---

```tsx
import { Button, Tooltip } from "@openperf/deft";
import { IconPlus } from "@tabler/icons-react";

import { Preview } from "../../src/Preview";

export default function TooltipBasic() {
  return (
    <Preview overlay={true}>
      <Tooltip.Root>
        <Tooltip.Trigger render={<Button.Root aria-label="Add" shape="square" />}>
          <IconPlus />
        </Tooltip.Trigger>
        <Tooltip.Content>Add</Tooltip.Content>
      </Tooltip.Root>
    </Preview>
  );
}
```

- Tooltips name things; they never hold information that isn't anywhere else. Use a [Popover](/deft/components/popover) for content people need to read or act on.
- The trigger still needs an `aria-label`.
- Wrap the app in one `Tooltip.Provider`. After one tooltip opens, neighbouring tooltips open without another delay.
- `Tooltip.Content` sits above the trigger, centred, and wraps long text. Pass `side` and `align` to move it.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `side?` | `"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"` | `"top"` | On Content. |
| `align?` | `"start" \| "center" \| "end"` | `"center"` | On Content. |

Other `Tooltip.Content` props go to the Base UI popup. Parts: `Root`, `Trigger`, `Provider`, `Content`; the other Base UI parts pass through unstyled. Built on Base UI [Tooltip](https://base-ui.com/react/components/tooltip).