覆盖jQuery UI工具提示小部件的CSS样式

我正在使用jQueryUI

但是我得到了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;
}

这完全没用。如何覆盖generic.tooltip以不同方式自定义某些工具提示

---

提前感谢那些希望将自定义类应用于新工具提示小部件（jQuery UI 1.9.1）的人，extraClass似乎不再工作了，但有一个新选项称为tooltipClass

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

为了解决与jQuery的css的潜在冲突，您可能需要添加

！重要信息

，请参见css中的行尾。感谢@sisharp指出：-）

实际上

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

---

请参见

试图在上述优秀答案的基础上，我试图设计泡沫的样式并摆脱旧的泡沫

如果你和我一样是新手（在其他地方，简单的任务需要几个小时），那么在同一个地方同时得到答案是很好的：） 以下是几个来源的解决方案，包括这个问题：

<a href="#"  title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>

上面提到的脚本，插入页脚：

<script>
$('.selector').tooltip({
        tooltipClass: "mytooltip",
});
</script>

$（'.selector'）。工具提示({
工具提示类：“我的工具提示”，
});

---

谢谢你回答这个问题，我忘记了另一个来源

我尝试了上述所有选项，但没有一个对我有效

我查看了与本文相关的工具提示，阅读后我尝试了以下方法：

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})

然后只需在样式中添加两个CSS类：

my-custom-class-name {
...
}
my-custom-class-name-content {
...
}

请注意，您可能必须使用！在自定义类中很重要。

其他解决方案：

$.widget( "ui.tooltip", $.ui.tooltip, {

    options:{

          tooltipClass: "your_class-Name",

    }

}); 

---

你所说的包装到底是什么意思，是一个包含的元素还是应用于工具提示的另一个类？当前公认的答案已经过时，链接已经失效。请参阅下面投票率最高的答案，了解当前的工作信息。我很高兴：-D（特别是如果它可以节省我花在解决问题上的时间；-）它增加了新的类别，但不会改变任何风格@FredTheLover-在我发布解决方案时，它起作用了，但是如果您发现工具提示Widget不起作用，则有可能对其进行了后续更改添加！对于css中的行结束很重要。这可能是因为您还包括了来自jquery的css，它们彼此冲突。对于我们这些未来的人来说，tooltipClass已经被删除了。请点击此链接了解新的操作方法：

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})

my-custom-class-name {
...
}
my-custom-class-name-content {
...
}

$.widget( "ui.tooltip", $.ui.tooltip, {

    options:{

          tooltipClass: "your_class-Name",

    }

});