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 BoxAlignDemo() {
return (
<div className="flex justify-between gap-4">
<div className="text-center">
<Tooltip position="bottom" boxAlign="left" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Bottom/Left</span>
</Tooltip>
<Tooltip position="left" boxAlign="left" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Left/Left</span>
</Tooltip>
<Tooltip position="right" boxAlign="left" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Right/Left</span>
</Tooltip>
</div>
<div className="text-center">
<Tooltip position="bottom" boxAlign="center" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Bottom/Center</span>
</Tooltip>
<Tooltip position="left" boxAlign="center" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Left/Center</span>
</Tooltip>
<Tooltip position="right" boxAlign="center" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Right/Center</span>
</Tooltip>
</div>
<div className="text-center">
<Tooltip position="bottom" boxAlign="right" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Bottom/Right</span>
</Tooltip>
<Tooltip position="left" boxAlign="right" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Left/Right</span>
</Tooltip>
<Tooltip position="right" boxAlign="right" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Right/Right</span>
</Tooltip>
</div>
</div>
);
}