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.

2
  • 1
    With your last snippet, are you applying these in the hover event?
    – Artur
    Jul 2, 2020 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. Jul 2, 2020 at 23:36

1 Answer 1

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
2
  • When i start to do this i make something like this 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 Jul 3, 2020 at 0: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! Jul 3, 2020 at 20:13

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.