Tooltip

A popup that appears when an element is hovered or focused, showing a hint.

API Reference

Preview

Installation

Usage

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
<Tooltip>
  <TooltipTrigger render={<Button variant="neutral" mode="stroke" />}>
    Hover me
  </TooltipTrigger>
  <TooltipContent>Helpful hint</TooltipContent>
</Tooltip>

API Reference

Tooltip

Root component. Wraps Tooltip.Root from Base UI with a built-in TooltipProvider (300ms delay).

TooltipTrigger

Trigger element. Alias for Tooltip.Trigger from Base UI.

TooltipContent

Popup container that displays the tooltip content. Also exported as TooltipContent.

All props from Base UI Tooltip are also supported.

Examples

Light

Positioning

Small

Large