React Overlay Trigger

Positioned overlay Component for React

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

Tooltip: click, tooltip show on bottom and right

<OverlayTrigger placement='right' triggers={['click']} overlay={overlay}>
  <Button className='Trigger'>....</Button>
</OverlayTrigger>

<OverlayTrigger placement='bottom' triggers={['click']} overlay={overlay}>
  <Button className='Trigger'>....</Button>
</OverlayTrigger>

Tooltip: Mouse hover and tab focus will trigger tooltips. They will show on top and left

<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>

Dialog: Open a dialog flowing over the trigger button.

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>