Loading…

Tooltip

A short label revealed on hover or keyboard focus.

Overlays
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add tooltip

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Icon Buttons
Sides
Long Text
Spring Pop

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Tooltip>

Every prop of Radix UI’s Tooltip.Root, plus className.

<TooltipContent>

Every prop of Radix UI’s Tooltip.Content, plus className.

Accessibility

Opens on focus as well as hover, and Escape dismisses it. Never put essential or interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an icon-only button, prefer aria-label for the name and use the tooltip only to repeat it visually. The opening pop is decoration and stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Logo grid tooltips