I am trying to create 3 popovers with different background colors using Bootstrap and CSS. Ideally, I would like the background color to change based on the specific letter placed inside the span's class attribute.
<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>
However, for some reason, it is not working as expected. Any assistance or guidance you can provide would be greatly appreciated. To test the code yourself, visit this LINK TO JSFIDDLE