F

Tooltip

Floating tooltip with configurable placement, a follow-cursor mode, and rich content support

Note
For best results, view this page on a desktop.
import { Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";


export default function TooltipDemo() {
  return (
    <div className="flex gap-3">
      <Tooltip content="Save your changes">
        <Button>Save</Button>
      </Tooltip>
      <Tooltip content="Discard this draft" side="bottom">
        <Button variant="secondary">Discard</Button>
      </Tooltip>
    </div>
  );
}

Installation

npx shadcn@latest add https://www.deltacomponents.dev/r/tooltip.json

Usage

1import { Tooltip } from "@/components/ui/tooltip";
2

3<Tooltip content="Save your changes">
4  <button>Hover me</button>
5</Tooltip>

Basic

import { Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";


export default function TooltipBasic() {
  return (
    <Tooltip content="Save your changes">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Placement

import { Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";


export default function TooltipPlacement() {
  return (
    <div className="flex gap-3">
      <Tooltip content="Top" side="top">
        <Button variant="secondary">Top</Button>
      </Tooltip>
      <Tooltip content="Right" side="right">
        <Button variant="secondary">Right</Button>
      </Tooltip>
      <Tooltip content="Bottom" side="bottom">
        <Button variant="secondary">Bottom</Button>
      </Tooltip>
      <Tooltip content="Left" side="left">
        <Button variant="secondary">Left</Button>
      </Tooltip>
    </div>
  );
}

Rich Content

import { Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";


export default function TooltipRichContent() {
  return (
    <Tooltip
      content={
        <div className="flex flex-col gap-1">
          <span style={{ fontVariationSettings: "'wght' 550" }}>
            Keyboard shortcut
          </span>
          <span className="text-muted-foreground">⌘ + S</span>
        </div>
      }
    >
      <Button>Save</Button>
    </Tooltip>
  );
}

Follow cursor

Move along me
Move along me
import { Tooltip } from "@/components/ui/tooltip";


export default function TooltipFollowCursor() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <Tooltip content="Following x" side="top" followCursor="x">
        <div className="flex h-12 w-64 cursor-default items-center justify-center rounded-lg border border-border text-[12px] text-muted-foreground">
          Move along me
        </div>
      </Tooltip>
      <Tooltip content="Following y" side="right" followCursor="y">
        <div className="flex h-40 w-12 cursor-default items-center justify-center rounded-lg border border-border text-[12px] text-muted-foreground">
          <span className="rotate-90 whitespace-nowrap">Move along me</span>
        </div>
      </Tooltip>
    </div>
  );
}

Delay

delayDuration is the wait before the tooltip starts opening, not the wait before the reader can see it. The 160ms entrance (the fade, the 4px slide and the zoom) runs after it, and only the sum of the two is perceptible, so the 40ms default is a 200ms budget with that entrance already taken out. Set it to 200 and a tooltip arrives 360ms after the pointer does.

import { Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";


export default function TooltipDelay() {
  return (
    <div className="flex gap-3">
      <Tooltip content="Instant" delayDuration={0}>
        <Button variant="secondary">No delay</Button>
      </Tooltip>
      <Tooltip content="Slow" delayDuration={500}>
        <Button variant="secondary">500ms delay</Button>
      </Tooltip>
    </div>
  );
}

API Reference