La guía o código que encontrarás en este artículo es la solución más eficiente y efectiva que encontramos a esta inquietud o problema.
Solución:
Puede hacer esto con CSS usando el .popover, .popover-title, y .popover-content clases.
.popover-title
background: #ffff99;
Como han señalado otros, la forma de cambiar el color de la ventana emergente es cambiar el CSS de .popover y .popover.right .arrow:after. Pero como queremos que esto suceda dinámicamente, haríamos:
$('.popover').css('background-color', 'red');
$('.popover.right .arrow:after').css('border-right-color', 'red');
Pero espere, el segundo fragmento de jQuery no es correcto. No puedes tener :after selector porque :after NO es parte de DOM, por lo tanto, ningún javascript en este mundo podrá capturar :after. Así que hice este CSS.
.popover-danger
background-color: #d9534f;
border-color: #d43f3a;
color: white;
.popover-danger.right .arrow:after
border-right-color: #d9534f;
Y cada vez que necesito cambiar el color de mi popover, escribo el siguiente fragmento de jQuery:
$('#selector').next('.popover').addClass('popover-danger');
El #selector es el elemento en el que ha aplicado el popover. De ese elemento busco el siguiente .popover. Esto asegura que estamos tratando con el popover adjunto al elemento actual solamente. Luego simplemente agregamos la clase para que el :after El selector se puede aplicar de forma natural sin JS.
DEMO DE JSFIDDLE.
Recuerda compartir este artículo si te fue útil.