100 lines
2.1 KiB
TypeScript
100 lines
2.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { Plus } from 'lucide-react'
|
|
|
|
import {
|
|
Tooltip,
|
|
TooltipTrigger,
|
|
TooltipContent,
|
|
} from '@/components/ui/tooltip'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const meta = {
|
|
title: 'Overlay/Tooltip',
|
|
component: Tooltip,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
} satisfies Meta<typeof Tooltip>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Hover me</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>This is a tooltip</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
),
|
|
}
|
|
|
|
export const Top: Story = {
|
|
render: () => (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Top</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<p>Tooltip on top</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
),
|
|
}
|
|
|
|
export const Right: Story = {
|
|
render: () => (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Right</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">
|
|
<p>Tooltip on right</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
),
|
|
}
|
|
|
|
export const Bottom: Story = {
|
|
render: () => (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Bottom</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Tooltip on bottom</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
),
|
|
}
|
|
|
|
export const Left: Story = {
|
|
render: () => (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Left</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="left">
|
|
<p>Tooltip on left</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
),
|
|
}
|
|
|
|
export const WithIconButton: Story = {
|
|
render: () => (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button size="icon" variant="outline">
|
|
<Plus className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Add item</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
),
|
|
}
|