I have 3 popovers and i want that each one have a diferent backgound color. i am doing it with boostrap and css. I want to make if i put "A" inside class="" of the span, the backgournd change to blue or if i put a "B" the backgournd change to green
<div class="container">
<div>
<span
data-content="PopOver A"
data-placement="right"
data-trigger="hover"
class="popoverjs A">PopOver A</span>
</div>
<div>
<span
data-content="PopOver B"
data-placement="right"
data-trigger="hover"
class="popoverjs B">PopOver B</span>
</div>
<div>
<span
data-content="PopOver C"
data-placement="right"
data-trigger="hover"
class="popoverjs C">PopOver C</span>
</div>
</div>
<script>
$('.popoverjs').popover();
</script>
<style>
.popover-title {
display: none;
}
.popover {
border: 0px;
border-radius: 15;
background: #39A5DB;
color: white;
}
.popover.right .arrow:after {
border-right-color: #39A5DB;
}
.A + .popover {
background-color: blue;
}
.B + .popover {
background-color: green;
}
.C + .popover {
background-color: red;
}
</style>
I dont know why its not working. I really appreciate your help. Also there is a link where you can test it: LINK TO JSFIDDLE