覆盖jQuery UI Tooltip小部件的CSS样式
我正在使用jQuery UI Tooltip小部件
我根据他们的例子编写了以下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的行末尾添加!important 。 感谢@sisharp指出:-)
试图在上面的优秀答案的基础上，我试图塑造泡沫的风格，并摆脱旧的…
如果你是像我这样的新手（在其他方面，简单的任务需要几个小时），很高兴在同一个地方同时得到答案:)以下是几个来源的解决方案，包括这个问题：
BETA
跨度删除浏览器气泡。
以新泡泡为例的CSS：
.mytooltip:hover:after{ background: #333; background: rgba(0,0,0,.9); border-radius: 5px; bottom: 26px; color: rgb(255, 77, 85); content: attr(title); right: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px;} .mytooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; right: 50%; position: absolute; z-index: 99; } .mytooltip { radius: 4px !important; background-color: black; color: rgb(255, 77, 85) !important; padding: 5px 20px; border-radius: 20px; margin: 50px; text-align: center; font: bold 14px ; font-stretch: condensed; text-decoration: none; box-shadow: 0 0 10px black; }
上面提到的脚本，插在页脚：
谢谢你这个问题，我忘记了其他来源。
我尝试了上面的所有选项，没有一个适合我。
我查看了关于主题的链接到本文的工具提示选项文档 ，在阅读之后我尝试了这个工作：
$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})
然后只需添加2个带有样式的CSS类：
my-custom-class-name { ... } my-custom-class-name-content { ... }
请注意，您可能必须在自定义类中使用！important。
实际上它
$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );
看到这里