Tooltip

A Radix-based tooltip with glass-morphism styling and animated entrance transitions.

Preview

Installation

npx shadcn@latest add @shadszn/tooltip

Usage

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

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="ghost" size="icon">
            <InfoIcon />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>This is a helpful tooltip.</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Subcomponents

Prop	Type	Default	Description
TooltipProvider	Provider	---	Wrap your app or section to enable tooltips.
Tooltip	Root	---	Root component managing open state.
TooltipTrigger	Trigger	---	Element that triggers the tooltip on hover.
TooltipContent	Content	---	The tooltip popup with glass-morphism styling.