Popovers

import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Popover from 'react-bootstrap/Popover'
import Button from 'react-bootstrap/Button'

{/* Popover on the top */}
<OverlayTrigger
  placement='top'
  overlay={
    <Popover>
      <Popover.Header as='h3'>Popover top</Popover.Header>
      <Popover.Body>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
      </Popover.Body>
    </Popover>
  }
>
  <Button variant='accent'>Popover on top</Button>
</OverlayTrigger>

{/* Popover on the right */}
<OverlayTrigger
  placement='right'
  overlay={
    <Popover>
      <Popover.Header as='h3'>Popover right</Popover.Header>
      <Popover.Body>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
      </Popover.Body>
    </Popover>
  }
>
  <Button variant='accent'>Popover on right</Button>
</OverlayTrigger>

{/* Popover on the bottom */}
<OverlayTrigger
  placement='bottom'
  overlay={
    <Popover>
      <Popover.Header as='h3'>Popover bottom</Popover.Header>
      <Popover.Body>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
      </Popover.Body>
    </Popover>
  }
>
  <Button variant='accent'>Popover on bottom</Button>
</OverlayTrigger>

{/* Popover on the left */}
<OverlayTrigger
  placement='left'
  overlay={
    <Popover>
      <Popover.Header as='h3'>Popover left</Popover.Header>
      <Popover.Body>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
      </Popover.Body>
    </Popover>
  }
>
  <Button variant='accent'>Popover on left</Button>
</OverlayTrigger>

import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Popover from 'react-bootstrap/Popover'
import Button from 'react-bootstrap/Button'

{/* Toggle popover on click */}
<OverlayTrigger
  trigger='click'
  placement='top'
  overlay={
    <Popover>
      <Popover.Header as='h3'>Popover on click</Popover.Header>
      <Popover.Body>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
      </Popover.Body>
    </Popover>
  }
>
  <Button variant='primary'>Toggle popover on click</Button>
</OverlayTrigger>

{/* Toggle popover on hover (hover is a default trigger) */}
<OverlayTrigger
  placement='top'
  overlay={
    <Popover>
      <Popover.Header as='h3'>Popover on hover</Popover.Header>
      <Popover.Body>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
      </Popover.Body>
    </Popover>
  }
>
  <Button variant='outline-primary'>Toggle popover on hover</Button>
</OverlayTrigger>