Creative Tim UICreative Tim UI

Shadcn Tooltip

PreviousNext

A popup that displays information when hovering over or focusing on an element, providing helpful context without cluttering the interface.

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

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Creative Tim UI</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add tooltip

Usage

import TooltipDemo from "@/components/tooltip-demo"
<TooltipDemo />

Examples

Tooltip Placement

Tooltips can be positioned on all four sides (top, right, bottom, left) and aligned to start, center (default), or end positions for precise placement.

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

export function TooltipPlacement() {
  return (
    <TooltipProvider>
      <div className="flex flex-col gap-3 px-32 py-16">
        <div className="flex justify-center gap-3">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Top</Button>
            </TooltipTrigger>
            <TooltipContent side="top">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Top Start</Button>
            </TooltipTrigger>
            <TooltipContent side="top" align="start">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Top End</Button>
            </TooltipTrigger>
            <TooltipContent side="top" align="end">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
        </div>
        <div className="flex justify-center gap-3">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Right</Button>
            </TooltipTrigger>
            <TooltipContent side="right">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Right Start</Button>
            </TooltipTrigger>
            <TooltipContent side="right" align="start">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Right End</Button>
            </TooltipTrigger>
            <TooltipContent side="right" align="end">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
        </div>
        <div className="flex justify-center gap-3">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Bottom</Button>
            </TooltipTrigger>
            <TooltipContent side="bottom">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Bottom Start</Button>
            </TooltipTrigger>
            <TooltipContent side="bottom" align="start">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Bottom End</Button>
            </TooltipTrigger>
            <TooltipContent side="bottom" align="end">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
        </div>
        <div className="flex justify-center gap-3">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Left</Button>
            </TooltipTrigger>
            <TooltipContent side="left">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Left Start</Button>
            </TooltipTrigger>
            <TooltipContent side="left" align="start">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button>Left End</Button>
            </TooltipTrigger>
            <TooltipContent side="left" align="end">
              <p>Creative Tim UI</p>
            </TooltipContent>
          </Tooltip>
        </div>
      </div>
    </TooltipProvider>
  )
}

Tooltip with Helper Icon

A tooltip triggered by an info icon button, displaying rich content including headings and descriptions for contextual help.

import { Info } from "lucide-react"

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

export function TooltipWithHelperIcon() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="ghost" size="icon">
            <Info className="h-5 w-5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent className="w-80 px-2.5 py-1.5">
          <p className="font-semibold">Creative Tim UI</p>
          <p className="text-sm opacity-90">
            Creative Tim UI is an easy to use components library for Tailwind
            CSS and shadcn/ui.
          </p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Tooltip Custom Styles

A fully customizable tooltip with custom border, background, and text colors to match your design system.

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

export function TooltipCustomStyles() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Hover</Button>
        </TooltipTrigger>
        <TooltipContent
          side="bottom"
          className="border-border bg-background text-foreground w-80 border px-3 py-2.5"
        >
          <p className="font-semibold">Creative Tim UI</p>
          <p className="text-sm opacity-80">
            Creative Tim UI is an easy to use components library for Tailwind
            CSS and shadcn/ui.
          </p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Props

The tooltip component is built using Radix UI's Tooltip primitive and accepts the following props:

Tooltip (Root Component)

PropTypeDefaultDescription
defaultOpenbooleanfalseThe open state of the tooltip when initially rendered
openboolean-Controlled open state of the tooltip
onOpenChange(open: boolean) => void-Event handler called when the open state changes
delayDurationnumber700The duration in milliseconds before the tooltip opens

TooltipTrigger

PropTypeDefaultDescription
asChildbooleanfalseChange the default rendered element for the one passed as a child

TooltipContent

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""top"The preferred side of the trigger to render against
align"start" | "center" | "end""center"The preferred alignment against the trigger
sideOffsetnumber4The distance in pixels from the trigger
alignOffsetnumber0The offset in pixels from the "start" or "end" alignment
avoidCollisionsbooleantrueWhether to avoid collisions with viewport boundaries

TooltipProvider

PropTypeDefaultDescription
delayDurationnumber700The global delay duration in milliseconds for all tooltips
skipDelayDurationnumber300Duration to skip the delay if another tooltip was recently shown
disableHoverableContentbooleanfalsePrevents the tooltip from remaining open when hovering over it

The tooltip component is highly customizable through Tailwind CSS classes and can be styled to match any design system. Use the className prop on TooltipContent to apply custom styling, including width, padding, colors, and typography.