New

Tooltip

Displays contextual information when hovering or focusing an element. Built on Base UI's tooltip primitive.

Last updated January 1, 1980

CreditsModifiedPublished

Copied from shadcn/ui.

  • TooltipTrigger measures the ambient direction where it renders and passes it explicitly to the portaled TooltipContent, so side="inline-start"/"inline-end" resolve correctly instead of always falling back to document direction

Overview

Installation

Usage

import {
 
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
 
export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline">Hover</Button>} />
        <TooltipContent>Add to library</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Examples

RTL

The tooltip measures the direction it actually renders in and passes it to the portaled popup, so it opens on the correct side even though the popup itself lives outside the RTL container in the DOM.

API Reference

Tooltip

API reference: Base UI Tooltip .

Edit this page on GitHub
PreviousToman IconNextTypography