Tooltip

Component

About

Accessible tooltip built on React Aria, from HeroUI v3. Shows informative text when users hover over or focus an element. Supports an optional arrow indicator, four placements (top/bottom/left/right), custom open/close delays, controlled offset, a disabled state, custom non-button triggers (avatars, chips, icons), custom-styled content, and a render-prop escape hatch. Compound API: Tooltip / Tooltip.Trigger / Tooltip.Content / Tooltip.Arrow, with delay, closeDelay, trigger, isDisabled, showArrow, offset and placement props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tooltip to your project and fits it to your theme.

Code

How Tooltip is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { Button, Tooltip } from "@/components/ui/heroui-tooltip"

export default function Demo() {
  return (
    <div className="grid grid-cols-3 gap-4 p-12">
      <div />
      <Tooltip delay={0}>
        <Button className="w-full" variant="tertiary">
          Top
        </Button>
        <Tooltip.Content showArrow placement="top">
          <Tooltip.Arrow />
          <p>Top placement</p>
        </Tooltip.Content>
      </Tooltip>
      <div />

      <Tooltip delay={0}>
        <Button className="w-full" variant="tertiary">
          Left
        </Button>
        <Tooltip.Content showArrow placement="left">
          <Tooltip.Arrow />
          <p>Left placement</p>
        </Tooltip.Content>
      </Tooltip>

      <div className="flex items-center justify-center">
        <span className="text-sm text-muted">Hover buttons</span>
      </div>

      <Tooltip delay={0}>
        <Button className="w-full" variant="tertiary">
          Right
        </Button>
        <Tooltip.Content showArrow placement="right">
          <Tooltip.Arrow />
          <p>Right placement</p>
        </Tooltip.Content>
      </Tooltip>

      <div />
      <Tooltip delay={0}>
        <Button className="w-full" variant="tertiary">
          Bottom
        </Button>
        <Tooltip.Content showArrow placement="bottom">
          <Tooltip.Arrow />
          <p>Bottom placement</p>
        </Tooltip.Content>
      </Tooltip>
      <div />
    </div>
  )
}