PlumUI

Tooltip

A small label that appears on hover or focus. Short delay, instant hand-off between neighbours.

OverlaysRadix Tooltip

Playground

Tweak the props, the preview and the code follow.

Props
150
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent showArrow>
    Copy to clipboard
    <kbd>⌘C</kbd>
  </TooltipContent>
</Tooltip>

Installation

npx @plumsydev/plum-ui add tooltip

Usage

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

Examples

Sides & arrow

Pass showArrow for a pointer and side to position it.

Feedback

The label swaps after the action and the tooltip stays open long enough to read it.

API Reference

TooltipProvider

Optional. Wrap a group of tooltips so moving between them skips the delay.

PropTypeDefault
delayDuration

Delay before opening, in ms.

number150
skipDelayDuration

Window during which the next tooltip opens instantly.

number300

TooltipContent

PropTypeDefault
side

Preferred side.

"top" | "right" | "bottom" | "left""top"
sideOffset

Distance from the trigger in px.

number6
showArrow

Renders an arrow pointing to the trigger.

booleanfalse

Notes

  • A <kbd> inside the content is styled automatically — handy for shortcuts.
  • Tooltips are not reachable on touch devices. Never hide essential information in one.
PreviousToggle GroupNextTree