Overlays

Tooltip, Popover, Alert dialog, Hover card, Context menu — all on Base UI portals.

stable client:visible

Source: src/components/ui/ Install: npx shadcn@latest add tooltip popover alert-dialog hover-card context-menu --yes

Rendered example — light + dark

Light

Right-click me

Dark

Right-click me

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

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

export function HelpTip() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="ghost">?</Button>} />
      <TooltipContent>Single source of truth lives in gallery.ts</TooltipContent>
    </Tooltip>
  );
}