'bootstrap5 popover left arrow edge is not colored

I have created popovers with bootstrap 5 and I would like to color the edge of my arrows around the popover. It works fine for all directions.

.popover {
   border: 1px #0d6efd solid;
}

.popover-header {
   color: black;
}

.popover>.popover-arrow {
    border-width: 1px;
}

.bs-popover-end>.popover-arrow::before{
    border-left-color: #0d6efd;
    border-right-color: #0d6efd;
}

.bs-popover-bottom>.popover-arrow::before{
    border-bottom-color: #0d6efd;
}

.bs-popover-top>.popover-arrow::before{
    border-top-color: #0d6efd;
}

Except for the right arrow. No border color is seen at all.

.bs-popover-left>.popover-arrow::before{
    border-color: #0d6efd;
}

Here the code which builds the popover:

let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(
        popoverTriggerEl,{
        container: popoverTriggerEl,
        html: true,
        trigger: 'hover focus',
        placement: 'right'
        })
    })

enter image description here enter image description here

cssbootstrap-5popover


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions