1

I made that 3 tooltips have a diferent color with js by 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');
      
  });

In this prototype works fine, the arrows match with the color of the tooltip background jsfiddle prototype (I set the "border-right-color" in three different ways for testing purposes).

But when i put it in my web app doesn't work.

how it looks on my app

I can set all the arrows color with:

.tooltip .arrow::before {
      border-right-color: green;
}

Like i did in thay picture, but i cant change the color by diferent data-toggle as i doing with de background-color of the tooltip.

I search and found that the problem maybe is that the color is set inside pseudo elements (::before) and i cant access with js, i never work with pseudo elements so i am a bit lost.

I alredy try to set it like this...

$('.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 nothing works, im usign bootstrap 4.

Sebastian Rodriguez
  • 37
  • 6
  • 1
    With your last snippet, are you applying these in the `hover` event? – Artur Jul 02 '20 at 23:31
  • 1
    Yes. maybe I didn't explain it well. i was trying to say that a try to change the color of the arrow puting that codes where is " $('.tooltip-arrow').css('border-right-color', 'blue');" in the first snippet. I try all that options but none of those worked. – Sebastian Rodriguez Jul 02 '20 at 23:36

1 Answers1

1

This might be an issue with the fact that the arrow is now generated with a pseudo element (you cannot apply inline styles to those, check the 3 option bellow). I got a few options for you:

  • Make a css class with he appropriate styles and append it to the main container (style both the inner and the arrow). For this one, you could define a data-tooltip-class attribute, to make a generic function to apply the right color for your markup on hover
  • Define your own template, with your own arrow rendering trick (maybe with a non-pseudo element)
  • Use one of the options from here
Artur
  • 334
  • 5
  • 15
  • When i start to do this i make something like this https://jsfiddle.net/d3yagbc4/5/ . Making a css class and define each tooltip, but although it also works in the prototype, in my app did not work, I came to the conclusion that it was because of hierarchy or maybe was the same problem with the pseudo element. I will try the others options! Thanks so much for your time – Sebastian Rodriguez Jul 03 '20 at 00:15
  • 1
    Finally i used the second option, i erased the ":: before" with `.tooltip .arrow::before { content: none;}` and create my own arrow `.arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid blue; }` Thanks so much! – Sebastian Rodriguez Jul 03 '20 at 20:13