<div class="container py-3">
  <div class="row pb-3">
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-right position-relative">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body">左方向に矢印</div>
      </div>        
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-left position-relative">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body">右方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-top position-relative">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body">下方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-bottom position-relative">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body">上方向に矢印</div>
      </div>   
    </div>
  </div>
</div>

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js