Tooltip is installed into your project as a file you own, and it takes every Ant Design Tooltip prop. The kit adds size, shape and transition, a denser default bubble, a thin border on arrowless bubbles in light mode, a classNames merge that keeps your classes and the kit's, and a default trigger that also opens on keyboard focus. Those rows are marked antuikit in the API table.
The bubble renders into document.body, not inside the trigger. Style it through classNames, and set getPopupContainer only when it has to scroll or clip with its trigger.
Install
npx antuikit@latest init
npx antuikit@latest add tooltip
The first command installs AntuikitProvider and the kit's base styles, and the second adds Tooltip.
Import
From @/components/ui/tooltip, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { Tooltip } from "@/components/ui/tooltip"
The axes
The enumerated props, and the values each one takes. These are the axes the Design tab's Figma properties correspond to. Three of the four come from the kit, and placement is Ant Design's.
size takes small and medium (the default). Medium already has less padding and smaller type than Ant Design's bubble, and it follows compact mode. Small steps the type down one more size, to fontSizeSM, for dense toolbars.
shape takes default, round and squircle, the same names Tag uses. Round is a pill and squircle has superellipse corners. Browsers without corner-shape show squircle with the default corners.
transition is a boolean, true by default. See Flags below.
placement takes top (the default), left, right, bottom, topLeft, topRight, bottomLeft, bottomRight, leftTop, leftBottom, rightTop, rightBottom. With autoAdjustOverflow on, which it is by default, the value you pass is a preference.
Flags
The booleans. Each turns one behavior on or off.
arrow={false} removes the pointer. In light mode the bubble then gets a thin border so it still stands apart from the page, whether the arrow was turned off on the tooltip or in ConfigProvider. arrow also accepts { pointAtCenter: true }, which only changes anything on the six corner placements.
transition={false} removes the open and close animation. The motion prop can change the animation but not remove it. Pair it with mouseEnterDelay={0} and mouseLeaveDelay={0} for the instant hint a dense toolbar wants.
autoAdjustOverflow is on by default and flips the bubble away from a clipping edge. With the default container that edge is the viewport. Set getPopupContainer to a box with overflow set to hidden, auto or scroll to flip at the box's edge instead.
destroyOnHidden unmounts the popup's contents while it is closed instead of leaving them in the DOM. It replaced destroyTooltipOnHide, which still works with a warning. Use it when the title is expensive to render.
Slots
The props that take a node, where your own markup goes: the bubble's content and the trigger.
title is the bubble's content, and it takes a node or a function. The function runs each time the bubble opens, so use it for content that has to be fresh. An empty or null title turns the tooltip off, which makes it conditional without unmounting it. A title of 0 still shows.
overlay is the same slot under its pre-v5 name, kept for compatibility. When both are given, overlay wins. Write title.
children is the trigger. Tooltip adds no element around it and attaches to the child, so the trigger keeps its own layout, and a className on Tooltip styles the popup. The child has to forward a ref and spread the props it receives. Every DOM element does, a custom component has to pass {...props} and its ref through, and plain text is wrapped in a <span> for you.
Events
onOpenChange
afterOpenChange
Styling
classNames and styles take the same three keys. Use them before any class-name selector. The bubble is a portal, so a selector written on the trigger never reaches it.
1
<Tooltip
2
classNames={{
3
root: "…",
4
container: "…",
5
arrow: "…",
6
}}
7
/>
A Tailwind class on one of these keys wins over the default styles without !important. Setting a component token's CSS variable on the element does nothing, so style the part itself or set the token in your theme.
API Reference
Tooltip
Tooltip's props. Rows marked antuikit in the Version column are added by the kit.