覆盖jQuery UI Tooltip小部件的CSS样式

前端之家收集整理的这篇文章主要介绍了覆盖jQuery UI Tooltip小部件的CSS样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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,它的作用就像一个魅力:

.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来定制不同的工具提示

提前致谢

解决方法

对于那些希望将自定义类应用于新的工具提示小部件(jQuery UI 1.9.1)的人来说,extraClass似乎不再有效,但是还有一个名为tooltipClass的新选项。
$('.selector').tooltip({
        tooltipClass: "your_class-Name",});

为了解决与jQuery的CSS的潜在冲突,您可能需要添加!对于css中的行结尾是重要的。感谢@sisharp指出:-)

原文链接:https://www.f2er.com/jquery/183392.html

猜你在找的jQuery相关文章