cal.pub0.org/packages/ui/components/tooltip/tooltip.stories.mdx

70 lines
1.6 KiB
Markdown

import { TooltipProvider } from "@radix-ui/react-tooltip";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
CustomArgsTable,
VariantsTable,
VariantRow,
} from "@calcom/storybook/components";
import Tooltip from "./Tooltip";
<Meta title="UI/Tooltip" component={Tooltip} />
<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
## Definition
Tooltip components can be used to provide additional information about an element when the user hovers over or focuses on the element.
<CustomArgsTable of={Tooltip} />
<Canvas>
<Story
name="Tooltip"
args={{
alertMsg: "Copied!",
hoverMsg: "Copy to clipboard",
content: "Hover Me",
}}
argTypes={{
alertMsg: {
control: {
type: "text",
},
},
hoverMsg: {
control: {
type: "text",
},
},
content: {
control: {
type: "text",
},
},
}}>
{({ alertMsg, hoverMsg, content }) => (
<TooltipProvider>
<VariantsTable titles={[""]} columnMinWidth={150}>
<VariantRow variant="Default">
<Tooltip content={`${hoverMsg}`}>
<span
className="dark:text-darkgray-50 bg-brand-default dark:bg-darkgray-900 rounded-md p-2 text-gray-100 hover:cursor-pointer"
onClick={() => {
alert(`${alertMsg}`);
}}>
{content}
</span>
</Tooltip>
</VariantRow>
</VariantsTable>
</TooltipProvider>
)}
</Story>
</Canvas>