Overlay

Tooltip

Inverted-surface tooltip (near-black on light, near-white on dark). Share timing with one TooltipProvider per app.

Show code

"use client";

import { Button } from "@/registry/lilt/ui/button";
import { MenuIcon } from "@/registry/lilt/ui/icons";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/registry/lilt/ui/tooltip";

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <Button
              aria-label="Open menu"
              iconOnly
              size="sm"
              variant="secondary"
            >
              <MenuIcon size={16} />
            </Button>
          }
        />
        <TooltipContent>Open the menu</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Installation

npx shadcn@latest add @lilt/tooltip

Accessibility

Appears on focus as well as hover, and never traps the pointer.