Tooltip React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Tooltip from @/components/ui/tooltip.

import { Copy, Heart, Share2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipGroup } from "@/components/ui/tooltip"

export function ListingActions({ onSave, onCopy }: { onSave: () => void; onCopy: () => void }) {
  return (
    <TooltipGroup>
      <div className="flex items-center gap-1">
        <Tooltip content="Save to favorites" shortcut="s">
          <Button variant="ghost" size="icon" radius="full" aria-label="Save to favorites" onClick={onSave}>
            <Heart />
          </Button>
        </Tooltip>
        <Tooltip content="Share">
          <Button variant="ghost" size="icon" radius="full" aria-label="Share">
            <Share2 />
          </Button>
        </Tooltip>
        <Tooltip content="Copy link" shortcut="mod+c" side="bottom" arrow>
          <Button variant="ghost" size="icon" radius="full" aria-label="Copy link" onClick={onCopy}>
            <Copy />
          </Button>
        </Tooltip>
      </div>
    </TooltipGroup>
  )
}

// a value that only shows its tooltip when it is cut off
export function Address({ value }: { value: string }) {
  return (
    <Tooltip content={value} overflowOnly>
      <span tabIndex={0} className="block max-w-40 truncate">
        {value}
      </span>
    </Tooltip>
  )
}

Props

• contentdefault ""
  ReactNode

  The label: a few words for an icon button, or a sentence with size md. Empty renders the trigger alone, so a tooltip can come and go without re-mounting the button.

• shortcutdefault ""
  string

  A combo in mod+k notation ("s", "mod+c", "alt+n", "shift+mod+p"), shown after the text at 60% of its color and set as aria-keyshortcuts on the trigger. Display only: bind the key yourself with useShortcut. Hidden on touch screens.

• children
  ReactNode

  The trigger, rendered asChild: a Button, an <a>, or a span with tabIndex={0}. It must pass a ref to its element. A disabled <button> gets no pointer events, so wrap it in a focusable span. A plain string gets a focusable span of its own. It keeps its own data-slot and data-state; the tooltip's state is in data-tooltip-state.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  neutral is the inverted tooltip: black on a light page, near-white on a dark one. Other tones fill with their color, for a label that carries meaning (out of stock, verified).

• colordefault ""
  string

  Any CSS color. Replaces the tone; the text turns black or white by lightness. Leave empty to use the tone.

• sizedefault "sm"
  "sm" | "md"

  sm is one short centered line in 12px medium type, up to 256px wide. md is for a sentence: 13px, more padding, left aligned, up to 288px wide. Both shrink to the room left on screen, so a flipped tooltip wraps on a phone instead of running off the edge.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled with the size: md is 8px on sm and 10px on md. full is a pill on one line and a soft capsule on a wrapped sentence.

• arrowdefault false
  boolean

  A small arrow with a rounded tip in the tooltip's color, pointing at the center of the trigger and kept clear of the corners.

• sidedefault "top"
  "top" | "right" | "bottom" | "left"

  Where it opens. It flips to the opposite side and slides along the edge when there is no room.

• aligndefault "center"
  "start" | "center" | "end"

  Alignment along the trigger's edge.

• sideOffsetdefault 6
  number

  Distance from the trigger in px. The arrow adds its own height on top.

• delayDurationdefault 300
  number

  Hover time in ms before it opens. Keyboard focus opens it at once. Inside a TooltipGroup the group's delay wins (the playground feeds this value to the group).

• longPressdefault true
  boolean

  On touch screens a long press on the trigger shows the tooltip, with a light vibration where supported. The click that would follow is swallowed, so the button does not fire. Off: touch never shows it.

• touchDurationdefault 1500
  number

  How long in ms it stays after the finger lifts from a long press. The next touch anywhere closes it sooner.

• overflowOnlydefault false
  boolean

  Opens only while the trigger's text is cut off (truncate or line-clamp on the trigger or inside it), so a cell shows its full value only when it needs to. The playground's heart never overflows, so it stays quiet.

• defaultOpendefault false
  boolean

  Starts open. The next hover elsewhere, click or scroll closes it.

• disableddefault false
  boolean

  Never opens and closes if it is open. The trigger itself keeps working.

• open
  boolean

  Controls it from outside, with onOpenChange. Handy for a confirmation like "Link copied" after a click.

• onOpenChange
  (open: boolean) => void

  Called on hover, focus, long press, Escape, click and scroll. Not called for opens that are refused (disabled, overflowOnly with nothing cut off, a tap on a touch screen).

• container
  HTMLElement | null

  Where the portal mounts. document.body by default.

• classNames
  Partial<Record<"content" | "arrow" | "shortcut", string>>

  Extra classes for the tooltip body, the arrow svg and the shortcut Kbd.

• className
  string

  Extra classes for the tooltip body (the trigger is your child), merged last. Other Radix content props (alignOffset, collisionPadding, avoidCollisions, onEscapeKeyDown, aria-label) pass through.

Parts

FAQ

Used in

More React overlay components