> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt > Use this file to discover all available pages before exploring further. # Tooltip > Display informative text when users hover over or focus on an element. ## Installation ```bash npm theme={null} npx shadcn@latest add tooltip ``` ```bash yarn theme={null} yarn dlx shadcn@latest add tooltip ``` ```bash pnpm theme={null} pnpm dlx shadcn@latest add tooltip ``` ```bash bun theme={null} bunx shadcn@latest add tooltip ``` ## Setup Add the `TooltipProvider` to the root of your app: ```tsx title="app/layout.tsx" theme={null} import { TooltipProvider } from "@/components/ui/tooltip" export default function RootLayout({ children }) { return ( {children} ) } ``` ## Usage ```tsx theme={null} import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" ``` ```tsx theme={null} Hover

Add to library

 ``` ## Examples ### Basic A simple tooltip with text content. ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipDemo() { return (

Add to library

 ) } ``` ### Positioning Control the position of the tooltip using the `side` prop. Top Right Bottom Left ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipTop() { return (

Tooltip on top

 ) } ``` ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipRight() { return (

Tooltip on right

 ) } ``` ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipBottom() { return (

Tooltip on bottom

 ) } ``` ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipLeft() { return (

Tooltip on left

 ) } ``` ### With Arrow Tooltips include an arrow by default pointing to the trigger element. ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipWithArrow() { return (

This tooltip has an arrow

 ) } ``` ### Keyboard Shortcut Display keyboard shortcuts in tooltips. ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipKeyboard() { return (

Save changes ⌘S

) } ``` ### Disabled Button Show a tooltip on a disabled button by wrapping it with a span. ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipDisabled() { return (

This action is currently disabled

 ) } ``` ### Delay Duration Control how long the user must hover before the tooltip appears. ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipDelay() { return (

This tooltip appears instantly

 ) } ``` ### Rich Content Tooltips can contain rich content, not just text. ```tsx theme={null} import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipRichContent() { return (

Feature Details

This feature allows you to customize the appearance and behavior of your components.

) } ``` ## Component Code ```tsx theme={null} "use client" import * as React from "react" import { Tooltip as TooltipPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) { return ( ) } function Tooltip({ ...props }: React.ComponentProps) { return } function TooltipTrigger({ ...props }: React.ComponentProps) { return } function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps) { return ( {children} ) } export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } ``` ## Props ### TooltipProvider | Prop | Type | Default | Description | | ------------------------- | --------- | ------- | --------------------------------------------- | | `delayDuration` | `number` | `0` | Time in ms before tooltip appears | | `skipDelayDuration` | `number` | `300` | Time before delay resets after pointer leaves | | `disableHoverableContent` | `boolean` | `false` | Prevents hovering over tooltip content | ### Tooltip | Prop | Type | Default | Description | | --------------- | ------------------------- | ------- | ---------------------------------- | | `open` | `boolean` | - | Controlled open state | | `defaultOpen` | `boolean` | `false` | Default open state (uncontrolled) | | `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes | | `delayDuration` | `number` | - | Overrides provider's delayDuration | ### TooltipTrigger | Prop | Type | Default | Description | | ----------- | --------- | ------- | ------------------------------ | | `asChild` | `boolean` | `false` | Merge props with child element | | `className` | `string` | - | Additional CSS classes | ### TooltipContent | Prop | Type | Default | Description | | ------------- | ---------------------------------------- | ---------- | ------------------------------- | | `side` | `"top" \| "right" \| "bottom" \| "left"` | `"top"` | Preferred side of the trigger | | `sideOffset` | `number` | `0` | Distance from trigger in pixels | | `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment relative to trigger | | `alignOffset` | `number` | `0` | Offset from alignment position | | `className` | `string` | - | Additional CSS classes | ## Accessibility * Automatically associates tooltip with trigger using `aria-describedby` * Keyboard accessible (opens on focus, closes on blur/escape) * Uses `role="tooltip"` for screen readers * Portal rendering prevents z-index issues * Respects `prefers-reduced-motion` ## Best Practices * Keep tooltip text concise and informative * Don't use tooltips for critical information * Ensure tooltips don't hide important content * Use `asChild` on trigger to merge with custom components * Wrap disabled buttons in a span to enable tooltips * Consider using instant tooltips (`delayDuration={0}`) for frequently accessed items ## API Reference Built on top of [Radix UI Tooltip](https://base-ui.com/react/components/tooltip). See the [official API documentation](https://base-ui.com/react/components/tooltip#api-reference) for more details.