Question

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

我完成了我的研究并发现了一些结果here和there，但不能使其发挥作用。

以下是我的html页面的一部分：

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

由于我引用了此页面上的所有tooltips：

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

tooltip-styling是以下CSS class：

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

没什么特别的，只是想检查一下是否应用了这种风格。

正如你猜测的那样，事实并非如此。

我该怎么做？

Answer 1

试试这个：

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

如此处所述：Here

Answer 2

根据你的情况，你必须覆盖的css声明是＆＃34;背景＆＃34;而不是＆＃34;背景色＆＃34;。

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

将CSS应用于JQuery工具提示

2 个答案: