Tooltip

Buttons

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 { Info } from "lucide-react"
import { Button, Tooltip } from "@/components/ui/heroui-tooltip"

export default function Demo() {
  return (
    <div className="flex items-center justify-center gap-4 p-12">
      <Tooltip delay={0}>
        <Button variant="secondary">Hover me</Button>
        <Tooltip.Content render={(props) => <div {...props} data-custom="foo" />}>
          <p>This is a tooltip</p>
        </Tooltip.Content>
      </Tooltip>

      <Tooltip delay={0}>
        <Button isIconOnly variant="tertiary">
          <Info />
        </Button>
        <Tooltip.Content render={(props) => <div {...props} data-custom="foo" />}>
          <p>More information</p>
        </Tooltip.Content>
      </Tooltip>
    </div>
  )
}