mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
9f38436f10
[web] Create Btoostrap 5 tooltips GitOrigin-RevId: 28c7c389bda74765482049750fc0ae8a5995968e
41 lines
970 B
TypeScript
41 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
|