Tooltip

Short supporting text for unfamiliar controls.

hintoverlay

Preview

Live · keyboard ready

When to use

One-line labels on icon-only buttons in toolbars.
Revealing the full text of truncated labels on hover or focus.
Dense toolbars where moving between icons should show labels instantly after the first one.

When not to use

Use popover for anything with links or controls inside.
Use hover-card for rich previews such as a person or link.
Avoid it for information people must see on touch devices, where hover does not exist.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "type": "registry:ui",
  "title": "Tooltip",
  "description": "Short supporting text for unfamiliar controls.",
  "categories": [
    "disclosure"
  ],
  "dependencies": [
    "@radix-ui/react-tooltip",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/tooltip/tooltip.tsx",
      "type": "registry:component",
      "target": "@components/manicat/tooltip/tooltip.tsx"
    },
    {
      "path": "registry/components/tooltip/tooltip.module.css",
      "type": "registry:component",
      "target": "@components/manicat/tooltip/tooltip.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/tooltip",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/tooltip",
    "markdown": "https://uiarc.dev/components/tooltip/markdown",
    "tags": [
      "hint",
      "overlay"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { Tooltip } from "@/components/manicat/tooltip/tooltip";
import { Button } from "@/components/manicat/button/button";

export function TooltipExample() {
  return (
    <div className="flex items-center gap-2">
      <Tooltip content="Copy the install command">
        <Button variant="secondary">Copy</Button>
      </Tooltip>
      <Tooltip content="Pinned to the top right" side="bottom">
        <Button variant="ghost" size="sm">Details</Button>
      </Tooltip>
    </div>
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Toolbar hints Tooltips that explain icon-sized or terse controls.

Live · keyboard ready

toolbar-hints-tooltips-that-explain-icon-sized-or-terse-controls-.tsxtsx

"use client";

import { Button } from "@/components/manicat/button/button";
import { Tooltip } from "@/components/manicat/tooltip/tooltip";

export function TooltipToolbarExample() {
  return (
    <div className="flex items-center gap-2">
      <Tooltip content="Copy the install command">
        <Button variant="secondary">Copy</Button>
      </Tooltip>
      <Tooltip content="Pinned to the top right" side="bottom">
        <Button variant="ghost" size="sm">
          Details
        </Button>
      </Tooltip>
    </div>
  );
}

Keyboard interactions

Keys	Action
Tab	Focusing the trigger opens the tooltip.
Escape	Closes the tooltip.

Accessibility

Radix links the content to the trigger with aria-describedby and renders role="tooltip".
Content is supplemental: icon-only triggers still need their own aria-label.
Do not put interactive elements inside; use popover instead.

Motion

Opens after 250ms with a 3px rise from 0.97 scale; within 300ms of another tooltip it opens instantly with a fade only.
Changing string content rises in with a blur while the bubble springs to the new size.
Reduced motion removes the transform and keeps a 90ms opacity fade.

Responsive behavior

The bubble caps at 15rem and wraps longer text; Radix flips it to the other side near viewport edges.
It opens on hover and keyboard focus, so touch users rarely see it; never hide essential information in one.

Performance

Each tooltip brings its own provider and mounts content in a portal only while open.
A ResizeObserver measures the text only to spring the bubble size when content changes while open.

Notes for AI

Use for one-line labels on icon buttons and truncated text. Use hover-card for rich previews and popover for anything interactive.
Each Tooltip brings its own provider; no app-level wrapper is needed.