Tooltip

A short label for a control.

Overview

Tooltip shows concise text on hover and on keyboard focus. A pointer connects the panel to its trigger. It is portaled to the document body so the article does not clip it.

The content is not interactive. Do not put buttons, links, or inputs inside it. Use Popover when the floating content needs controls.

Preview

Customize

Side
Delay Duration
400

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add tooltip

Usage

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

export function Hint() {
  return (
    <Tooltip content="Saved locally">
      <Button type="button">Hint</Button>
    </Tooltip>
  );
}

Examples

Basic

Hover the button or move focus to it.

Keyboard

Focus opens the tooltip. Escape closes it. Focus stays on the trigger.

Position

side places the tooltip and its pointer above, below, or beside the trigger.

In practice

Icon-only toolbar controls keep visible labels in Tooltips. Each button still has an accessible name.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
contentReactNode—Short, non-interactive text shown beside the trigger.
side"top" | "right" | "bottom" | "left""top"Preferred side. It flips when that side does not fit.
delayDurationnumber400Hover delay in milliseconds. Focus shows the tooltip immediately.
childrenReactElement—The trigger. It receives aria-describedby while the tooltip is open.

Accessibility

The open tooltip has role="tooltip" and the trigger points to it with aria-describedby. The tooltip is not in the tab order and does not take focus.

  • Focus shows it immediately. Hover waits for delayDuration.
  • Escape hides it while the trigger is focused.
  • A disabled control cannot be focused, so the keyboard path is unavailable.