Tooltip

Shows a short hint when you hover over or focus its trigger.

tooltip-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { TooltipContent, TooltipTrigger } from "@/components/vip-ui/tooltip";export function TooltipDemo() {  return (    <TooltipTrigger>      <Button variant="outline">Save draft</Button>      <TooltipContent>Keep changes private until you publish.</TooltipContent>    </TooltipTrigger>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-tooltip.json

Composition

TooltipTrigger
- Button
  It must be focusable.
- TooltipContent
  - TooltipArrowOptional

Placement and arrow

If there is no space, the tooltip moves to the opposite side.

tooltip-placement-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import {  TooltipArrow,  TooltipContent,  TooltipTrigger,} from "@/components/vip-ui/tooltip";const placements = [  { placement: "top", label: "Top", side: "above", cell: "col-start-2" },  {    placement: "left",    label: "Left",    side: "to the left of",    cell: "col-start-1 row-start-2",  },  {    placement: "right",    label: "Right",    side: "to the right of",    cell: "col-start-3 row-start-2",  },  {    placement: "bottom",    label: "Bottom",    side: "below",    cell: "col-start-2 row-start-3",  },] as const;export function TooltipPlacementDemo() {  return (    <div className="grid grid-cols-[repeat(3,6rem)] justify-center gap-2 py-4">      {placements.map((item) => (        <TooltipTrigger key={item.placement}>          <Button variant="outline" className={item.cell}>            {item.label}          </Button>          <TooltipContent placement={item.placement}>            <TooltipArrow />            Opens {item.side} the trigger.          </TooltipContent>        </TooltipTrigger>      ))}    </div>  );}

Icon button tooltips

Match each aria-label to the tooltip text.

tooltip-actions-demo.tsx

"use client";import { CheckIcon, InfoIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";import { TooltipContent, TooltipTrigger } from "@/components/vip-ui/tooltip";export function TooltipActionsDemo() {  return (    <div className="flex items-center gap-2">      <TooltipTrigger>        <Button iconOnly variant="outline" aria-label="Mark as reviewed">          <CheckIcon aria-hidden="true" />        </Button>        <TooltipContent>Mark as reviewed</TooltipContent>      </TooltipTrigger>      <TooltipTrigger>        <Button iconOnly variant="ghost" aria-label="Show details">          <InfoIcon aria-hidden="true" />        </Button>        <TooltipContent placement="bottom">Show details</TooltipContent>      </TooltipTrigger>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Tooltip (opens in a new tab).

TooltipTrigger

delay: number = 400: Milliseconds of hover before the tooltip opens. Keyboard focus opens it at once.

TooltipContent

offset: number = 8: Distance from the trigger in pixels.
placement: "top" | "bottom" | "left" | "right" | "start" | "end" = "top": The side of the trigger that the tooltip opens on. If there is not sufficient space, the tooltip moves to the opposite side.
arrowBoundaryOffset: number = 8: The minimum distance from TooltipArrow to the tooltip edge. It keeps the arrow off the rounded corner.