Tooltip

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/tooltip

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Tooltip content="Styled with design tokens"><Button variant="secondary">Hover me</Button></Tooltip>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

TooltipProvider

PropTypeDefaultDescription

delaynumber—How long to wait before opening the tooltip on hover.

closeDelaynumber—How long to wait before closing a tooltip.

timeoutnumber400Another tooltip will open instantly if the previous tooltip is closed within this timeout.

PropTypeDefaultDescription

defaultOpenbooleanfalseWhether the tooltip is initially open.

openboolean—Whether the tooltip is currently open.

onOpenChange((open: boolean, eventDetails: TooltipRoot.ChangeEventDetails) => void)—Event handler called when the tooltip is opened or closed.

onOpenChangeComplete((open: boolean) => void)—Event handler called after any animations complete when the tooltip is opened or closed.

disableHoverablePopupbooleanfalseWhether the tooltip contents can be hovered without closing the tooltip.

trackCursorAxis'none' | 'x' | 'y' | 'both''none'Determines which axis the tooltip should track the cursor on.

actionsRefReact.RefObject<TooltipRoot.Actions | null>—A ref to imperative actions.

disabledbooleanfalseWhether the tooltip is disabled.

handleTooltipHandle<Payload>—A handle to associate the tooltip with a trigger.

triggerIdstring | null—ID of the trigger that the tooltip is associated with.

defaultTriggerIdstring | null—ID of the trigger that the tooltip is associated with.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Tooltip — see its reference for the full keyboard map.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--bgTooltip

--brand-radius-mdTooltip

--fgTooltip

--shadow-overlayTooltip

Source

src/components/ui/tooltip/tooltip.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

On this page