How can we change the color of arrow in the popover of bootstrap?

I found out that you need to override one class for each of the possible positions of the popover. In this example, my "tour" popover has a dark background and white text:

.popover[class*=tour-] {
    background: #434A54;
    color: white;
}

/* Needed to have the triangle match the grey background of the popover */
.popover[class*=tour-].top .arrow:after {
    border-top-color: #434A54;
}

.popover[class*=tour-].right .arrow:after {
    border-right-color: #434A54;
}

.popover[class*=tour-].bottom .arrow:after {
    border-bottom-color: #434A54;
}

.popover[class*=tour-].right .arrow:after {
    border-left-color: #434A54;
}

Use this css changing border-right color of pseudo element:

.popover.right .arrow:after {
  border-right-color: red;
}

#DEMO

Using a standard popover in Bootstrap 3, as in:

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="this is the message">
  Popover on right
</button>

You can add the following css to your custom rules:

.popover {
  background-color: red; /*substitute 'red' with your color of choice*/
  border-color: red;
}
.popover.right>.arrow:after {
  border-right-color: red;
}
.popover-content {
  background-color: red;
}

In Bootstrap 4,

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: yellow; // Any color here
}