Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-tooltip"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>
)
}