Ответ 1

Используйте этот css, изменяющий границу справа от psudo:

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

DEMO

Ответ 2

Использование стандартного popover в Bootstrap 3, как в:

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

Вы можете добавить следующие css к своим пользовательским правилам:

.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;
}

Ответ 3

Не уверен в этом, но вы можете попробовать изменить

<div class="arrow" style="margin-top:-45px;"></div> 

to

<div class="arrow" style="margin-top:-45px; color: red;"></div> 

Надеюсь, что это поможет.

С уважением, Alex

Ответ 4

Я узнал, что вам нужно переопределить один класс для каждой из возможных позиций popover. В этом примере мой "тур" popover имеет темный фон и белый текст:

.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;
}

Ответ 5

[Загрузочный Popover со стрелкой и цветом фона]

.popover{
   background: #ebd997;
    height: 100px;
    width: 500px;
}

.popover.top> .arrow:after {
    border-top-color: #ebd997;
}