# Tooltip
> Show a brief, nonessential hint when a control receives hover or keyboard focus.
Source: https://www.honestui.com/docs/components/tooltip
```tsx
import { Button } from "@/components/honest-ui/ui/button"
import {
Tooltip,
TooltipPopup,
TooltipTrigger,
} from "@/components/honest-ui/ui/tooltip"
export function TooltipDemo() {
return (
}>
Hover me
Helpful hint
)
}
```
## Overview [#overview]
Use a Tooltip to provide a short hint for an element: what an icon-only button does, the full text behind a truncated label, a keyboard shortcut for a familiar action. The word "nonessential" matters — anything required to complete a task must be visible without hovering or focusing, because touch users cannot hover at all and many people never dwell long enough to trigger the tooltip.
Tooltips are display-only. They close when focus moves on, so they cannot hold buttons, links, or form fields; use a Popover for interactive content opened deliberately.
## Anatomy [#anatomy]
A tooltip has a trigger and popup content, plus an optional arrow rendered by default. Wrap several tooltips in `TooltipProvider` to share delay behavior across them. Content should be short — one phrase or sentence — because it appears in small type next to the cursor and disappears as soon as attention moves.
## Behavior [#behavior]
**Showing.** Tooltips appear on hover after a rest delay (600 ms by default) and on keyboard focus with no delay, so keyboard users get hints immediately upon tabbing. Moving between grouped tooltips inside one `TooltipProvider` skips the wait: once one is visible, adjacent tooltips open instantly, and a closed tooltip reopens instantly if another opens within 400 ms.
**Dismissing.** Hovering away or blurring the trigger closes the tooltip. Pressing Escape dismisses it too, which matters when a tooltip covers something the person needs to see or click. A tooltip never takes focus itself — it stays purely visual.
**Placement.** `side` (`top` by default), `align`, and `sideOffset` sit on `TooltipPopup`. Set `showArrow={false}` to remove the arrow. The popup flips and shifts to stay in the viewport.
## Accessibility [#accessibility]
The trigger keeps its own accessible name and state; the popup gets no ARIA role and no automatic description link. That is intentional — Base UI treats tooltip text as supplementary, because screen readers do not reliably announce hover content. The practical consequence: every trigger must make sense without its tooltip. Icon-only controls need an explicit `aria-label`, and the tooltip becomes redundant reinforcement rather than the only source of the name.
Keyboard parity is built in: focusing the trigger shows the same tooltip a mouse user sees, and Escape dismisses without moving focus. Because the tooltip does not receive focus, nothing about it appears in the tab order.
Text wraps inside a capped width instead of forming a single long line, so hints remain readable near screen edges. Colors come from theme tokens for dark mode, entrance motion respects reduced-motion preferences through the component's transition classes, and placement uses logical sides that respect document direction.
## Installation [#installation]
Install the following dependencies:
```bash
npm install @base-ui-components/react
```
Copy and paste the following code into your project.
### components/ui/tooltip.tsx
```tsx
"use client"
import { Tooltip as TooltipPrimitive } from "@base-ui-components/react/tooltip"
import { cn } from "@/lib/utils"
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
return
}
function TooltipPopup({
className,
arrowClassName,
align = "center",
sideOffset = 4,
side = "top",
showArrow = true,
children,
...props
}: TooltipPrimitive.Popup.Props & {
align?: TooltipPrimitive.Positioner.Props["align"]
side?: TooltipPrimitive.Positioner.Props["side"]
sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"]
arrowClassName?: string
showArrow?: boolean
}) {
return (
{children}
{showArrow && }
)
}
function TooltipArrow({
className,
children,
...props
}: TooltipPrimitive.Arrow.Props) {
return (
{children ?? (
)}
)
}
export {
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipArrow,
TooltipPopup,
TooltipPopup as TooltipContent,
}
```
Update the import paths to match your project setup.
## Usage [#usage]
```tsx
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
```
```tsx
}>
Hover me
Helpful hint
```
**Grouping Tooltips**
To group multiple tooltips so they appear instantly after the first one is opened, wrap them in `TooltipProvider`. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.
```tsx
}>
Tooltip 1
Content 1}>
Tooltip 2
Content 2
```
## Don't do this [#dont-do-this]
### Nesting the trigger inside a button [#nesting-the-trigger-inside-a-button]
```tsx
// Bad
```
```tsx
// Good
}>
Save
Save changes to this draft
```
`TooltipTrigger` renders a real `