<div class="container py-3">
  <h3>Primary</h3>
  <div class="row pb-3">
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-right position-relative bg-primary">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">左方向に矢印</div>
      </div>        
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-left position-relative bg-primary">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">右方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-top position-relative bg-primary">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">下方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-bottom position-relative bg-primary">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">上方向に矢印</div>
      </div>   
    </div>
  </div>
  <h3>Secondary</h3>
  <div class="row pb-3">
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-right position-relative bg-secondary">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">左方向に矢印</div>
      </div>        
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-left position-relative bg-secondary">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">右方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-top position-relative bg-secondary">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">下方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-bottom position-relative bg-secondary">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">上方向に矢印</div>
      </div>   
    </div>
  </div>
  <h3>Success</h3>
  <div class="row pb-3">
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-right position-relative bg-success">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">左方向に矢印</div>
      </div>        
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-left position-relative bg-success">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">右方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-top position-relative bg-success">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">下方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-bottom position-relative bg-success">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">上方向に矢印</div>
      </div>   
    </div>
  </div>
  <h3>Info</h3>
  <div class="row pb-3">
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-right position-relative bg-info">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">左方向に矢印</div>
      </div>        
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-left position-relative bg-info">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">右方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-top position-relative bg-info">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">下方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-bottom position-relative bg-info">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">上方向に矢印</div>
      </div>   
    </div>
  </div>  
  <h3>Warning</h3>
  <div class="row pb-3">
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-right position-relative bg-warning">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">左方向に矢印</div>
      </div>        
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-left position-relative bg-warning">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">右方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-top position-relative bg-warning">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">下方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-bottom position-relative bg-warning">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">上方向に矢印</div>
      </div>   
    </div>
  </div> 
  <h3>Danger</h3>
  <div class="row pb-3">
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-right position-relative bg-danger">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">左方向に矢印</div>
      </div>        
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-left position-relative bg-danger">
        <div class="arrow d-flex align-items-center m-0 h-100"></div>
        <div class="popover-body text-white">右方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-top position-relative bg-danger">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">下方向に矢印</div>
      </div>   
    </div>
    <div class="col-12 col-md-3 pb-3">
      <div class="popover bs-popover-bottom position-relative bg-danger">
        <div class="arrow d-flex justify-content-center m-0 w-100"></div>
        <div class="popover-body text-white">上方向に矢印</div>
      </div>   
    </div>
  </div>  
</div>
// Color system

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  ),
  $colors
);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

@mixin arrow-border-color($direction, $target, $color) {
  .bs-popover-#{$direction}#{$target} {
		border-#{$direction}-color: $color !important;
  }
}

@each $color, $value in $theme-colors {
	@include arrow-border-color("right", ".bg-#{$color} .arrow::after", $value);
	@include arrow-border-color("left", ".bg-#{$color} .arrow::after", $value);
	@include arrow-border-color("top", ".bg-#{$color} .arrow::after", $value);
	@include arrow-border-color("bottom", ".bg-#{$color} .arrow::after", $value);
}
View Compiled

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