Thành phần

Tooltip

Tooltip on Base UI: ink block, paper Barlow 12px, no arrow, shadow or radius; opens on focus.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/tooltip

Usage

tsx

import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>Save draft</TooltipTrigger>
    <TooltipContent>Saves without publishing</TooltipContent>
  </Tooltip>
</TooltipProvider>

Wrap the app (or a toolbar) in one TooltipProvider so neighbouring tooltips open instantly after the first.

States

State	Treatment
Open	Ink fill, paper Barlow 12px; opacity fade, none under reduced motion
Trigger focus	2px ink outline, 2px offset
Disabled	`disabled` on `Tooltip`: the tip never opens

Keyboard

Key	Action
Tab	Focusing the trigger shows the tip; moving focus away hides it
Esc	Hides the tip; focus stays on the trigger

Vietnamese

Ink adaptation

Upstream shadcn's rounded bubble, arrow and zoom animation are removed: the tip is a square ink block with paper text and a 1px ink rule, and it fades with opacity only. Built on Base UI Tooltip.