Tooltips

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

{/* Tooltip on the top */}
<OverlayTrigger
  placement='top'
  overlay={<Tooltip>Tooltp on top</Tooltip>}
>
  <Button variant='outline-secondary'>Tooltp on top</Button>
</OverlayTrigger>

{/* Tooltip on the right */}
<OverlayTrigger
  placement='right'
  overlay={<Tooltip>Tooltp on right</Tooltip>}
>
  <Button variant='outline-secondary'>Tooltp on right</Button>
</OverlayTrigger>

{/* Tooltip on the bottom */}
<OverlayTrigger
  placement='bottom'
  overlay={<Tooltip>Tooltp on bottom</Tooltip>}
>
  <Button variant='outline-secondary'>Tooltp on bottom</Button>
</OverlayTrigger>

{/* Tooltip on the left */}
<OverlayTrigger
  placement='left'
  overlay={<Tooltip>Tooltp on left</Tooltip>}
>
  <Button variant='outline-secondary'>Tooltp on left</Button>
</OverlayTrigger>

{/* Tooltp with JSX */}
<OverlayTrigger
  placement='top'
  overlay={<Tooltip><i>Tooltip</i> <u>with</u> <strong>JSX</strong></Tooltip>}
>
  <Button variant='outline-secondary'>Tooltp with JSX</Button>
</OverlayTrigger>