Anwenden von CSS auf JQuery-Tooltip

Question

Ich versuche, einen CSS auf die gesamte Tooltip auf meiner html Seite anzuwenden, kann aber nicht den Weg finden, es zu tun.

Ich habe meine Forschung getan und einige Ergebnisse gefunden here und there zum Beispiel, aber kann es nicht funktionieren.

Dies ist Teil von meiner html Seite:

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

Und da ich die ganze tooltips auf dieser Seite verweisen:

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

tooltip-styling wird die folgende CSS class:

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

Nichts Besonderes, wollte nur c Verdammt, wenn der Stil angewendet wird.

Wie Sie erraten haben, ist es nicht.

Was soll ich mehr tun?

Answer 1

Montage Ihrem Fall die CSS-Deklaration Sie überschreiben müssen, ist "Hintergrund" und nicht "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

.

Answer 2

Try this:

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

Wie hier erklärt: Here