Components

Tooltip

A popup that displays informative text when users hover over, focus on, or tap an element. Built on Radix UI Tooltip.

Preview

Installation

npx blackboard-ui@latest add tooltip

Usage

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

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover</TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Examples

Default

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

Positions

Use the side prop to control which side the tooltip appears on.

<TooltipContent side="top">Tooltip on top</TooltipContent>
<TooltipContent side="right">Tooltip on right</TooltipContent>
<TooltipContent side="bottom">Tooltip on bottom</TooltipContent>
<TooltipContent side="left">Tooltip on left</TooltipContent>

With Icon Button

Pair tooltips with icon buttons to provide accessible labels for actions.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon">
        <Plus />
        <span className="sr-only">Add</span>
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add new item</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

With Keyboard Shortcut

Display a keyboard shortcut alongside the tooltip label — useful for toolbar actions and menu items.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon">
        <Save />
        <span className="sr-only">Save</span>
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <div className="flex items-center gap-2">
        <span>Save Changes</span>
        <kbd className="inline-flex items-center justify-center rounded bg-foreground/15 px-1.5 py-0.5 font-mono text-[10px] font-medium leading-none">
          ⌘S
        </kbd>
      </div>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

Prop	Type	Default
delayDuration	number	0
skipDelayDuration	number	300

Prop	Type	Default
size	"default" \| "sm" \| "lg"	"default"
side	"top" \| "right" \| "bottom" \| "left"	"top"
sideOffset	number	4
align	"start" \| "center" \| "end"	"center"
className	string	—

Also accepts all Radix Tooltip Content props.