I managed to give 3 tooltips different colors using JavaScript and data-toggle like this
<span class="tooltipjs" data-toggle="sin-datos" data-placement="right" data-original-title="some text">A</span>
$('[data-toggle="sin-datos"]').hover(function(){
$('.tooltip-inner').css('background-color', 'blue');
$('.tooltip-inner').css('color', 'white');
$('.tooltip-arrow').css('border-right-color', 'blue');
});
It works perfectly in this prototype, where the arrow color matches the background color of the tooltip jsfiddle prototype (I set the "border-right-color" in three different ways for testing purposes).
However, when I implement it in my web app, it doesn't work.
https://i.sstatic.net/2A9t0.png
I can change all the arrow colors with:
.tooltip .arrow::before {
border-right-color: green;
}
As shown in the picture, but I'm unable to change the color based on different data-toggles like I did with the background-color of the tooltip.
I researched and found that the issue may be related to setting the color inside pseudo elements (::before) which cannot be accessed using JavaScript. Since I have limited experience working with pseudo elements, I am a bit perplexed.
I tried multiple approaches like...
$('.tooltip-arrow').css('border-right-color', 'color');
$('.tooltip > .tooltip-arrow').css('border-right-color', 'color');
$('.tooltip .tooltip-arrow').css('border-right-color', 'color');
$('.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before').css('border-right-color', 'color');
$('.tooltip .arrow::before').css('border-right-color', 'color');
But none of them seem to work, I am using Bootstrap 4.