mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-15 12:50:57 -05:00
42 lines
970 B
TypeScript
42 lines
970 B
TypeScript
|
import { Button } from 'react-bootstrap-5'
|
||
|
|
import Tooltip from '@/features/ui/components/bootstrap-5/tooltip'
|
||
|
|
import { Meta } from '@storybook/react'
|
||
|
|
|
||
|
|
export const Tooltips = () => {
|
||
|
|
const placements = ['top', 'right', 'bottom', 'left'] as const
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: '200px',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
margin: '0 auto',
|
||
|
|
padding: '35px 0',
|
||
|
|
gap: '35px',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{placements.map(placement => (
|
||
|
|
<Tooltip
|
||
|
|
key={placement}
|
||
|
|
id={`tooltip-${placement}`}
|
||
|
|
description={`Tooltip on ${placement}`}
|
||
|
|
overlayProps={{ placement }}
|
||
|
|
>
|
||
|
|
<Button variant="secondary">Tooltip on {placement}</Button>
|
||
|
|
</Tooltip>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const meta: Meta<typeof Tooltip> = {
|
||
|
|
title: 'Shared / Components / Bootstrap 5 / Tooltip',
|
||
|
|
component: Tooltip,
|
||
|
|
parameters: {
|
||
|
|
bootstrap5: true,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
export default meta
|