Apply CSS to JQuery tooltip

Question

I try to apply a CSS to all the tooltip on my html page but can't find the way to do it.

I have done my research and found some results here, and there for instance, but can't make it work.

Here is part from my html page:

<div class="col-sm-3 text-center" title="Tooltip title"> </div>

And since I reference all the tooltips on this page:

(function (window, $) {   
    // Set the Tooltips
    $(document).ready(function(){
        $(document).tooltip({
            tooltipClass: "tooltip-styling"
        });
    });
})(window, $);

tooltip-styling is the following CSS class:

.tooltip-styling{
    background-color:red !important;
    color: red !important;
}

Nothing fancy, just wanted to check if the style is applied.

As you have guessed, it is not.

What should i do more?

$('.selector').tooltip({ tooltipClass: "tooltip-styling", }); — user4520208
– user4520208, Commented Jul 20, 2016 at 9:13
Possible duplicate of Overriding CSS styles of the jQuery UI Tooltip widget — user4520208
– user4520208, Commented Jul 20, 2016 at 9:14

Nineoclick · Accepted Answer · 2016-07-20 09:20:10Z

2

Fitting your case, the css declaration you have to overwrite is "background" and not "background-color".

https://jsfiddle.net/nrnLgc36/1/

html

<div class="col-sm-3 text-center" title="Tooltip title">TEST</div>

css

.tooltip-styling{
    background:green !important;
    color: black !important;
}

.col-sm-3 {
  display: block;
  background: #bacd63;
}

javascript

(function (window, $) {

    // Set the Tooltips
    $(document).ready(function(){
        $(document).tooltip({
            tooltipClass: "tooltip-styling"
        });
    });
})(window, $);

answered Jul 20, 2016 at 9:20

Nineoclick

8149 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mornor Over a year ago

That was it ... Thanks!

Mayank Pandeyz · Accepted Answer · 2016-07-20 09:13:25Z

2

Try this:

$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );

As explained here: Here

answered Jul 20, 2016 at 9:13

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

1 Comment

Mornor Over a year ago

I think it is exactly the same as my code, isn't it?

Collectives™ on Stack Overflow

Apply CSS to JQuery tooltip

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related