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

61 lines
1.7 KiB
Markdown

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
import { TooltipProvider } from "@radix-ui/react-tooltip";
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 p-2 bg-brand-default rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
onClick={() => {
alert(`${alertMsg}`);
}}>
{content}
</span>
</Tooltip>
</VariantRow>
</VariantsTable>
</TooltipProvider>
)}
</Story>
</Canvas>