覆盖jQuery UI Tooltip小部件的CSS样式 [英] Overriding CSS styles of the jQuery UI Tooltip widget

问题描述

我使用的是jQuery UI 工具提示窗口小部件

I am using the jQuery UI Tooltip widget

<li>
    <div class="i1">
        <a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ">
            <span class="ui-icon ui-icon-search"></span>
        </a>
    </div>
</li>
<li><a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"><span class="ui-icon ui-icon-info"></span></a></li>
<li><a href="#inf-3"title="ΕΠΙΠΕΔΑ"><span class="ui-icon ui-icon-copy"></span></a></li>

我根据他们的例子写了下面的CSS，

and I wrote the following CSS based on their example and it works like a charm:

.tooltip {
    display:none;
    background: black;
    font-size:12px;
    height:10px;
    width:80px;
    padding:10px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;
}

但我有3-4个工具提示想要看起来不同（像上面的例子html），所以我把它们包装在类
，并且这样做：

But I got 3-4 tooltips that I want to look different (like the example html above) so I wrapped them inside a class and did this:

.i1 .tooltip  {
    display:none;
    background: red;
    font-size:12px;
    height:40px;
    width:80px;
    padding:20px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    left: 50px important!;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;
}

提前感谢

推荐答案

对于那些想要应用自定义类到新的tooltip小部件（jQuery UI 1.9.1），extraClass似乎不再工作，但有一个新的选项称为tooltipClass。

For those looking to apply a custom class to the new tooltip widget (jQuery UI 1.9.1), extraClass doesn't seem to work anymore, but there is a new option called tooltipClass.

$('.selector').tooltip({
        tooltipClass: "your_class-Name",
});

为了解决与jQuery的css的潜在冲突，您可能需要添加 ！important 到css中行的末尾。 感谢@sisharp指出： - ）

In order to address potential conflicts with jQuery's css, you may need to add !important to the end of the lines in your css. Thanks to @sisharp for pointing that out :-)

这篇关于覆盖jQuery UI Tooltip小部件的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！