Components
Loading preview...
A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/tooltip-1import { Tooltip } from "@/components/ui/tooltip-1";
export default function CustomContentDemo() {
return (
<div className="flex justify-between gap-4">
<Tooltip
text={
<>
The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
</>
}
>
<span className="dark:text-white">Top</span>
</Tooltip>
<Tooltip
position="bottom"
text={
<>
The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
</>
}
>
<span className="dark:text-white">Bottom</span>
</Tooltip>
<Tooltip
position="left"
text={
<>
The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
</>
}
>
<span className="dark:text-white">Left</span>
</Tooltip>
<Tooltip
position="right"
text={
<>
The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
</>
}
>
<span className="dark:text-white">Right</span>
</Tooltip>
</div>
);
}