Components
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-tooltipLoading preview...
"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>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...