jQuery UI工具提示小部件的重写CSS样式

Question

我正在使用jQuery UI Tooltip小部件

<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，它的工作原理就像一个魅力：

.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示例），所以我将它们包装在一个类中并执行以下操作：

.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 以不同方式自定义某些工具提示？

提前致谢

Answer 1

对于那些希望将自定义类应用于新的工具提示小部件（jQuery UI
1.9.1）的用户，extraClass似乎不再起作用，但是有一个名为tooltipClass的新选项。

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

为了解决与jQuery的css的潜在冲突，您可能需要!important在css的行末添加。 感谢@sisharp指出:-)