2

On my webpage, I have number of icons over which a tooltip is applied. What I want is, change the background color according to the icon color. I cannot make changes in the main file.

Can anyone tell me how can I change the background color of the tooltip div?

I have applied below jquery, but it changes color when I remove the cursor from the icon:

$('.icon_box').hover(function(){
// I can check the color of icon here and put below, for testing I have applied orange
  $('div.tooltipster-default').css("background-color", "blue");

});

Thanks.

Neha
  • 143
  • 4
  • 19
  • "but it changes color when I remove the cursor from the icon" I'm not entirely sure what this means. What exactly is the problem? Can you make a minimum example on jsfiddle.net to show what's going wrong? – Stephan Muller May 27 '16 at 11:29
  • If you have no CSS options, you can add `!important` to force the style : `$('div.tooltipster-default').css("background-color", "blue !important");` – Vincent G May 27 '16 at 11:36
  • "but it changes color when I remove the cursor from the icon" mean, On mouse out from the icon I get my expected output (color changes). I want to change the css of div on hover over icon. But somewhere in the bakend it is made by tooltipster. I am not sure if this function is called on hover or any other action. I am new on this tooltipster, sorry if I am asking something silly – Neha May 27 '16 at 11:37
  • @Vincent G I want this dynamically. Different background color for different icon – Neha May 27 '16 at 11:38
  • @Neha Can you add a fiddle of it please ? – Vincent G May 27 '16 at 12:37

1 Answers1

0

You'll want to use Tooltipster's functionReady option. Something like:

$('.icon_box').tooltipster({
    functionReady: function(origin){
        var originBackgroundColor = origin.css('background-color'),
            tooltip = origin.tooltipster('elementTooltip');

        // I'm not sure if it should be applied on $(tooltip) or one
        // of its children, you'll have to check it out
        $(tooltip).find('.tooltipster-default').css('background-color', originBackgroundColor);
    }
});
Louis Ameline
  • 2,779
  • 1
  • 25
  • 25