javascript - 将 CSS 应用于 JQuery 工具提示

Question

我尝试将 CSS 应用于我的 html 页面上的所有工具提示，但找不到实现它的方法。

我已经完成研究并找到了一些结果 here , 和 there例如，但无法使其工作。

这是我的 html 页面的一部分:

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

因为我引用了此页面上的所有工具提示:

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

tooltip-styling 是以下 CSS 类:

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

没什么特别的，只是想检查是否应用了样式。

如您所料，事实并非如此。

我还应该做什么？

Answer 1

适合您的情况，您必须覆盖的 css 声明是“背景”而不是“背景颜色”。

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