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/tooltipimport React from "react";
import { Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";
export const Default = () => (
<div className="flex flex-col gap-2 px-96 w-full">
<div className="font-bold text-xl dark:text-white">Default</div>
<div className="flex justify-between gap-4">
<Tooltip text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Top</span>
</Tooltip>
<Tooltip position="bottom" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Bottom</span>
</Tooltip>
<Tooltip position="left" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Left</span>
</Tooltip>
<Tooltip position="right" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Right</span>
</Tooltip>
</div>
</div>
)
export const NoDelay = () => (
<div className="flex flex-col gap-2 px-96 w-full">
<div className="font-bold text-xl dark:text-white">No delay</div>
<div className="flex justify-between gap-4">
<Tooltip text="The Evil Rabbit Jumped over the Fence" delay={false}>
<span className="dark:text-white">Top</span>
</Tooltip>
<Tooltip position="bottom" text="The Evil Rabbit Jumped over the Fence" delay={false}>
<span className="dark:text-white">Bottom</span>
</Tooltip>
<Tooltip position="left" text="The Evil Rabbit Jumped over the Fence" delay={false}>
<span className="dark:text-white">Left</span>
</Tooltip>
<Tooltip position="right" text="The Evil Rabbit Jumped over the Fence" delay={false}>
<span className="dark:text-white">Right</span>
</Tooltip>
</div>
</div>
)
export const BoxAlign = () => (
<div className="flex flex-col gap-2 px-96 w-full">
<div className="font-bold text-xl dark:text-white">Box align</div>
<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>
</div>
)
export const CustomContent = () => (
<div className="flex flex-col gap-2 px-96 w-full">
<div className="font-bold text-xl dark:text-white">Custom content</div>
<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>
</div>
)
export const CustomType = () => (
<div className="flex flex-col gap-2 px-96 w-full">
<div className="font-bold text-xl dark:text-white">Custom type</div>
<div className="flex justify-between gap-4">
<Tooltip type="success" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Top</span>
</Tooltip>
<Tooltip position="bottom" type="error" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Bottom</span>
</Tooltip>
<Tooltip position="left" type="warning" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Left</span>
</Tooltip>
<Tooltip position="right" type="violet" text="The Evil Rabbit Jumped over the Fence">
<span className="dark:text-white">Right</span>
</Tooltip>
</div>
</div>
)
export const Components = () => (
<div className="flex flex-col gap-2 px-96 w-full">
<div className="font-bold text-xl dark:text-white">Components</div>
<div className="flex justify-between items-center gap-4">
<Tooltip position="bottom" text="The Evil Rabbit Jumped over the Fence">
<Button size="small">Bottom</Button>
</Tooltip>
<Tooltip position="left" text="The Evil Rabbit Jumped over the Fence">
<Badge size="sm">LEFT</Badge>
</Tooltip>
<Tooltip position="right" text="The Evil Rabbit Jumped over the Fence">
<Spinner />
</Tooltip>
</div>
</div>
)
export const Other = () => (
<div className="flex flex-col gap-2 px-96 w-full">
<div className="font-bold text-xl dark:text-white">Other</div>
<div className="flex justify-between gap-4">
<Tooltip text="The Evil Rabbit Jumped over the Fence" tip={false}>
<span className="dark:text-white">No tip indicator</span>
</Tooltip>
<Tooltip text="The Evil Rabbit Jumped over the Fence" center={false}>
<span className="dark:text-white">No center text</span>
</Tooltip>
</div>
</div>
)