Mornor Mornor - 4 months ago 17
CSS Question

Apply CSS to Jquery tooltip

I try to apply a CSS to all the tooltip on my

html
page but can't find the wax 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?

Answer

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, $);