110k
New

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Component tooltip-demo not found in registry.

Installation

pnpm dlx createui@latest add tooltip

Usage

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

Examples

Side

Use the side prop to change the position of the tooltip.

Component tooltip-sides not found in registry.

With Keyboard Shortcut

Component tooltip-keyboard not found in registry.

Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

Component tooltip-disabled not found in registry.

API Reference

See the Radix Tooltip documentation.