Tooltip

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

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/tooltip.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
 
export function MyComponent() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button>Hover</button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Tooltip text</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Examples

Positions

Rich Content

Icon Trigger

Custom Delay

API Reference

The component uses Radix UI Primitives. For a complete API reference, please refer to the Radix UI Tooltip Documentation.

Prop	Type	Default	Description
`delayDuration`	`number`	`700`	The duration from when the mouse enters a tooltip trigger until the tooltip opens.
`side`	`enum`	`"top"`	The preferred side of the trigger to render against when open.

Textarea Design Principles

On This Page

Installation Usage Examples Positions Rich Content Icon Trigger Custom Delay API Reference