Tooltip

A small popup label shown on hover or focus.

Updated 2026-06-04

Default

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild><Button variant="outline">Hover me</Button></TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</TooltipProvider>

A small popup label shown on hover or focus.

Installation

railbase ui add tooltip

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/lib/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>Helpful hint</TooltipContent>
  </Tooltip>
</TooltipProvider>

Anatomy

Exported parts: TooltipProvider · Tooltip · TooltipTrigger · TooltipContent