Popover Placement

My team are looking for the right solution for the automatic placement of the popovers. As seen in the samples, the popovers switch position automatically depending on where it fits no matter where it is placed.

When we tried to use the popover in our system, it does switch its placement automatically but the arrow stays in its default placement. We expect the popover's arrow to change its placement when the whole popover changes its position.

<MDBPopover
  placement="top"
  popover
  clickable
  id="popper1"
  >
  <MDBBtn>View Top Hint</MDBBtn>
  <div>
    <MDBPopoverHeader className="sprout-hint-header">Title</MDBPopoverHeader>
    <MDBPopoverBody className="sprout-hint-body">
      Body text goes here. Fabulas epicuri iracundia quo eu, legere quodsi assentior ius ad. 
      Cetero iracundia adolesens te eam, adhuc oportere theophrastus eum ut. Epicuri iudicabit ei nam.
    </MDBPopoverBody>
  </div>