The `react-overlay-trigger` component helps you position an overlay component relative to the target element. You can use it to create tooltips, popovers, and other overlays.
Examples
<OverlayTrigger placement='right' triggers={['click']} overlay={overlay}>
<Button className='Trigger'>....</Button>
</OverlayTrigger>
<OverlayTrigger placement='bottom' triggers={['click']} overlay={overlay}>
<Button className='Trigger'>....</Button>
</OverlayTrigger>
<OverlayTrigger placement='top' triggers={['hover', 'focus']} overlay={overlay}>
<Button className='Trigger'>....</Button>
</OverlayTrigger>
<OverlayTrigger placement='right' triggers={['hover', 'focus']} overlay={overlay}>
<Button className='Trigger'>....</Button>
</OverlayTrigger>
const Dialog = React.forwardRef(function Dialog({style, onClose, ...props}, ref) {
return (
<div>
<div>Dialog content....</div>
<button onClick={onClose}>close</button>
</div>
)
})
<OverlayTrigger
placement='center'
triggers={['click']}
overlay={<Dialog />}
>
<button className='Trigger'>Open the dialog</button>
</OverlayTrigger>