<div style="width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center">

<button

  type="button"

  class="btn btn-secondary"

  data-mdb-container="body"

  data-mdb-toggle="popover"

  data-mdb-placement="top"

  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."

>

  Popover on top

</button>

​

<button

  type="button"

  class="btn btn-secondary"

  data-mdb-container="body"

  data-mdb-toggle="popover"

  data-mdb-placement="right"

  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."

>

  Popover on right

</button>

​

<button

  type="button"

  class="btn btn-secondary"

  data-mdb-container="body"

  data-mdb-toggle="popover"

  data-mdb-placement="bottom"

  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."

>

  Popover on bottom

</button>

​

<button

  type="button"

  class="btn btn-secondary"

  data-mdb-container="body"

  data-mdb-toggle="popover"

  data-mdb-placement="left"

  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."

>

  Popover on left

</button>

</div>

.popover .popover-arrow {

  display: block;

}

​

​

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after, .bs-popover-top>.popover-arrow:after {

    border-top-color: red;

}

​

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after, .bs-popover-bottom>.popover-arrow:after {

    border-bottom-color: blue;

}

​

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after, .bs-popover-end>.popover-arrow:after {

    border-right-color: green;

}

​

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after, .bs-popover-start>.popover-arrow:after {

    border-left-color: yellow;

}

​