Components
Loading preview...
HeroUI tooltip that shows informative text on hover or focus, with arrow, placement, delay and disabled options.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-tooltip"use client"
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}>
<Tooltip.Trigger>
<Button variant="secondary">Hover me</Button>
</Tooltip.Trigger>
<Tooltip.Content className="bg-accent text-accent-foreground">
<p>Custom styled tooltip</p>
</Tooltip.Content>
</Tooltip>
</div>
)
}