Tooltip

Installation

$ npx shadcn@latest add https://goodui.dev/r/tooltip.json

The file lands in components/goodui/tooltip.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/tooltip works too.

Usage

import { Bell, CalendarPlus } from "lucide-react"
import { Button } from "@/components/goodui/button"
import { Tooltip, TooltipGroup } from "@/components/goodui/tooltip"

export function Toolbar() {
  return (
    <TooltipGroup>
      <Tooltip title="New booking" content="For the selected slot" shortcut="Mod+N">
        <Button size="sm" iconLeft={<CalendarPlus />}>New</Button>
      </Tooltip>
      <Tooltip content="3 unread notifications" variant="tone" tone="danger" side="bottom">
        <Button size="sm" variant="ghost" iconOnly aria-label="Notifications">
          <Bell />
        </Button>
      </Tooltip>
    </TooltipGroup>
  )
}

When to use

Examples

// Disabled buttons get no pointer or focus events, so wrap them.
<Tooltip content="Refunds open after the payout clears">
  <span tabIndex={0}>
    <Button disabled>Refund</Button>
  </span>
</Tooltip>

const [i, setI] = React.useState(0)

<Tooltip followCursor delay={0} animation="fade" title={hours[i]} content={`${load[i]} of 8 chairs booked`}>
  <div tabIndex={0} onPointerMove={(e) => setI(indexFromX(e))}>{bars}</div>
</Tooltip>

<Tooltip content={copied ? "Copied!" : "Copy link"} open={copied ? true : undefined}>
  <Button onClick={copy}>Copy link</Button>
</Tooltip>

API reference

Accessibility

• •The bubble has role="tooltip". The trigger's aria-describedby points at it while it is open, and at a hidden copy of the same text while it is closed, so screen readers announce the description on focus either way. Existing aria-describedby values are kept.
• •It opens on hover (after delay), on keyboard focus (focus-visible, at once) and on touch long-press; it never opens on mouse click.
• •The pointer can move from the trigger onto the tooltip without it closing (closeDelay), and Esc dismisses it.
• •The shortcut keycaps come from the kbd component, which gives each special key a spoken name; a translatable "Shortcut:" prefix (labels.shortcut) is read before them.
• •The tooltip is a description, not a name: icon-only triggers still need aria-label.

Motion

• •scale: from 0.9 in 160 ms. slide: 5px toward its side in 200 ms. spring: from 0.55 on a spring (stiffness 620, damping 22). fade: opacity only, 140 ms. Every variant fades out in 100 ms.
• •Scale and spring grow from the arrow tip, so the tooltip seems to come out of the trigger.
• •Inside a TooltipGroup, tooltips that open instantly after the first skip the movement and fade in over 60 ms.
• •Reduced motion: a 100 ms fade, no movement. animation="none" shows and hides instantly.

• •Nothing renders until the tooltip opens (apart from the hidden description). Positioning runs on open, scroll, resize and size changes, not every frame; followCursor repositions on pointer move.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related