Tooltip

A small label that explains a control on hover.

@cupertinoui/tooltipBase UI Tooltip Registry JSON

"use client"

import { ShareIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipDemo() {
  return (
    <TooltipProvider delay={400}>
      <Tooltip>
        <TooltipTrigger render={<Button variant="secondary" size="icon-lg" aria-label="Share" />}>
            <ShareIcon />
          </TooltipTrigger>
        <TooltipContent side="bottom">Share</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/tooltip

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Share</TooltipTrigger>
    <TooltipContent>Share</TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

Every part forwards the props of the underlying Base UI Tooltip part. The props below are the ones CupertinoUI adds or changes.

TooltipProvider

Prop	Type	Description
`delay`	`number` Default: `0`	Delay before showing, in milliseconds. macOS waits about half a second.