Tooltip

A short hint on hover or keyboard focus, in the village's inverse colours. It names, it never holds actions: for those, use Popover.

Installation

npx rasengan-ui add tooltip

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/tooltip.json

Usage

import { LinkIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
export function Copy() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="Copy link" />}>
          <LinkIcon />
        </TooltipTrigger>
        <TooltipContent>Copy link</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

One provider

Put one TooltipProvider near the root of the app: once a tooltip is open, the next one opens without the delay (delay, 300ms here).

Variants

default is inverted, in the village's ink. outline is a popover surface with a border, for a tooltip over dark content or one that should stay quiet.

<TooltipContent variant="outline">Copy the link</TooltipContent>

Villages

It is drawn in --tooltip and --tooltip-foreground, the inverse of the page, with an arrow; it opens in the nearest VillageScope.

Accessibility

• It shows on hover and on keyboard focus, and closes on Esc.
• Base UI's tooltip is not linked to its trigger with aria-describedby: the trigger needs its own accessible name, as with the aria-label above. Never put information only in a tooltip.

API reference

The parts of Base UI's Tooltip, styled: