Tooltip

featurefrom shadcn/ui Essentials

Tooltip

AI Usage Rules

Wrap the app in TooltipProvider. Use Tooltip for supplementary info on hover. Keep content short (1 sentence max). Never put critical info in tooltips alone.

Code Template

"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<typeof TooltipPrimitive.Provider>) {
  return <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
}

function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return <TooltipPrimitive.Root {...props} />
}

function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger {...props} />
}

function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content sideOffset={sideOffset} className={cn("z-50 rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95", className)} {...props}>
        {children}
        <TooltipPrimitive.Arrow className="size-2.5 fill-foreground" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

Props Schema

Property	Type	Default	Description
side	string	—
content	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "side": {
      "enum": [
        "top",
        "right",
        "bottom",
        "left"
      ],
      "type": "string"
    },
    "content": {
      "type": "string"
    }
  }
}