Popover is installed into your project as a file you own. It takes every Ant Design Popover prop and adds three: size, shape and transition, the same three Tooltip has. It also makes color fill the whole bubble with readable text. placement, getPopupContainer and color take the same values as on Tooltip.
Install
npx antuikit@latest init
npx antuikit@latest add popover
The first command sets up your project once, with AntuikitProvider and the theme tokens. The second adds Popover.
Import
Import from @/components/ui/popover, not from antd. The file lives in your project, so the path is a project path.
import { Popover } from "@/components/ui/popover"
The axes
The props that take a fixed set of values. The Design tab's Figma properties follow them. Both are added by the kit.
size: medium (the default) is Ant Design's own size. small uses less padding, smaller text and a narrower title, and follows compact mode.
shape: default, round (a pill, best for one line) or squircle (smooth corners at a larger radius). squircle needs Chromium 139 or later and shows rounded corners elsewhere.
The arrow sits outside the bubble and does not follow its corners, so pair round and squircle with arrow={false} or a centered placement.
Flags
Two props that each turn something off.
transition (added by the kit, default true): false removes the open and close zoom, which the motion prop cannot do. Pair it with mouseEnterDelay={0} and mouseLeaveDelay={0} for a hint that appears at once.
arrow (default on) takes false to hide it, or { pointAtCenter: true } to aim it at the middle of the trigger.
Slots
The props that take a node, where your own markup goes. Use them before a descendant selector.
title is a heading inside the bubble. On Tooltip, title is the whole bubble.
content is the body. Either one alone is enough. With neither, no bubble opens.
children is the trigger. It has to be one element that accepts a ref and the mouse and focus events. A disabled <button> gets none of them, so wrap it in a span.
title and content also take a function, which runs each time the popover opens. A node is built when the trigger renders, so values inside it go stale.
classNames and styles take the same keys, one per part. Use them before a descendant selector: a part with a key stays stable across versions.
1
<Popover
2
classNames={{
3
title: "…",
4
content: "…",
5
}}
6
/>
A utility class on one of these keys wins without !important. Setting a component token's CSS variable on the root has no effect, so change the token in your theme or style the part instead.
API Reference
Popover
Popover's props. Rows marked antuikit in the Version column are added by the kit.