# antuikit / Tooltip

> Tooltip with `size`, `shape` and `transition`, a denser bubble, and a default `trigger` that opens on focus.

Docs: https://antuikit.com/docs/components/tooltip

## Install

npx antuikit@latest init
npx antuikit@latest add tooltip

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/tooltip/basic.md): Wrap any element in `Tooltip` and set `title` to show a short hint on hover and focus. `defaultOpen` shows it on load, and it closes as usual.
- [Sizes](https://ui.antuikit.com/embed/tooltip/sizes.md): Set `size="small"` for a smaller bubble in dense toolbars, next to the default `medium`, which follows compact mode.
- [Shapes](https://ui.antuikit.com/embed/tooltip/shapes.md): Set `shape` to `squircle` or `round` to change the bubble's corners, and pair it with `arrow={false}` so the arrow does not sit on the curve.
- [Transition](https://ui.antuikit.com/embed/tooltip/transition.md): Set `transition={false}` and both mouse delays to `0` so the bubble appears and disappears at once, with no zoom.
- [Preset colors](https://ui.antuikit.com/embed/tooltip/colorful.md): Set `color` to one of the preset names, like `red`, `gold` or `geekblue`, to tint the bubble with a color from the theme.
- [Custom color](https://ui.antuikit.com/embed/tooltip/custom-color.md): Pass `color` any CSS color, like a hex value or a CSS variable, for a bubble in a color the presets do not include.
- [Placement](https://ui.antuikit.com/embed/tooltip/placement.md): Set `placement` to one of twelve positions around the trigger, from `top` and `left` to corners like `bottomRight`.
- [Arrow](https://ui.antuikit.com/embed/tooltip/arrow.md): Set `arrow` to `false` to hide the pointer, or to `{ pointAtCenter: true }` to aim it at the middle of the trigger on a corner placement.
- [Flip to fit](https://ui.antuikit.com/embed/tooltip/auto-shift.md): `autoAdjustOverflow` flips a bubble that would be clipped to the other side, like one asked to open right of a button at a card's edge.
- [Triggers](https://ui.antuikit.com/embed/tooltip/triggers.md): Set `trigger` to `hover`, `click`, `focus` or `contextMenu` to choose what opens the bubble, one per button.
- [Shared bubble](https://ui.antuikit.com/embed/tooltip/unique.md): Wrap a row of triggers in `UniqueProvider` so one bubble slides between them instead of each one opening its own.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/tooltip`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Tooltip` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.