66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
import { Button } from "../components/Button";
|
|
import { Tooltip, TooltipContent } from "../components/Tooltip";
|
|
|
|
export default {
|
|
title: "React/Tooltip",
|
|
component: Tooltip,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
};
|
|
|
|
export const Default = () => {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipContent>
|
|
<p className="whitespace-nowrap">Hello World!</p>
|
|
</TooltipContent>
|
|
<Button>Hover me</Button>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export const Top = () => {
|
|
return (
|
|
<Tooltip position="top">
|
|
<TooltipContent>
|
|
<p className="whitespace-nowrap">Hello World!</p>
|
|
</TooltipContent>
|
|
<Button>Hover me</Button>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export const Bottom = () => {
|
|
return (
|
|
<Tooltip position="bottom">
|
|
<TooltipContent>
|
|
<p className="whitespace-nowrap">Hello World!</p>
|
|
</TooltipContent>
|
|
<Button>Hover me</Button>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export const Left = () => {
|
|
return (
|
|
<Tooltip position="left">
|
|
<TooltipContent>
|
|
<p className="whitespace-nowrap">Hello World!</p>
|
|
</TooltipContent>
|
|
<Button>Hover me</Button>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export const Right = () => {
|
|
return (
|
|
<Tooltip position="right">
|
|
<TooltipContent>
|
|
<p className="whitespace-nowrap">Hello World!</p>
|
|
</TooltipContent>
|
|
<Button>Hover me</Button>
|
|
</Tooltip>
|
|
);
|
|
};
|