覆盖 jQuery UI 工具提示小部件的 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4780759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding CSS styles of the jQuery UI Tooltip widget
提问by elasticrash
I am using the jQuery UI Tooltip widget
我正在使用 jQuery UI工具提示小部件
<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>
and I wrote the following CSS based on their example and it works like a charm:
我根据他们的示例编写了以下 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;
}
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:
但是我得到了 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;
}
which does absolutely nothing. How can I override the generic .tooltipto customize certain tooltips differently?
什么都不做。如何覆盖通用.tooltip以不同方式自定义某些工具提示？
Thanks in advance
提前致谢
回答by Chaya Cooper
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.
对于那些希望将自定义类应用于新工具提示小部件 (jQuery UI 1.9.1) 的人来说，extraClass 似乎不再起作用，但有一个名为 tooltipClass 的新选项。
$('.selector').tooltip({
tooltipClass: "your_class-Name",
});
In order to address potential conflicts with jQuery's css, you may need to add !importantto the end of the lines in your css. Thanks to @sisharp for pointing that out :-)
为了解决与 jQuery 的 css 的潜在冲突，您可能需要添加!important到 css 中的行尾。感谢@sisharp 指出这一点:-)
回答by user2060451
Trying to build on the excellent answer above, I was trying to style the bubble and get rid of the old one...
试图建立在上面的优秀答案的基础上，我试图设计气泡并摆脱旧的......
If you are novice like me (in other others, simple task takes hours), it's nice to have the answer all at the same time on the same place :) Here is the solution from a couple of sources, including this question:
如果您像我一样是新手（在其他人中，简单的任务需要几个小时），很高兴在同一个地方同时获得所有答案:) 以下是几个来源的解决方案，包括这个问题：
<a href="#" title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>
The span removes the browser bubble.
跨度消除了浏览器气泡。
The CSS for the new bubble as example:
以新气泡的 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;
}
And the script above mentioned, inserted at footer:
上面提到的脚本，插入在页脚：
<script>
$('.selector').tooltip({
tooltipClass: "mytooltip",
});
</script>
Thank you to this question, thisand I forgot the other source.
感谢您提出这个问题，这和我忘记了其他来源。
回答by AmitF
I tried all of the options above and none worked for me.
我尝试了上述所有选项，但没有一个对我有用。
I looked into the tooltip options docswhich linked to this article about theming, after reading it I tried this which worked:
我查看了链接到这篇关于主题的文章的工具提示选项文档，阅读后我尝试了这个：
$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})
Then just add the 2 CSS classes with your styling:
然后只需使用您的样式添加 2 个 CSS 类：
my-custom-class-name {
...
}
my-custom-class-name-content {
...
}
Note that you might have to use !important in your custom classes.
请注意，您可能必须在自定义类中使用 !important。
回答by FredTheLover
回答by Pedro Andujar
Other solution :
其他解决方案：
$.widget( "ui.tooltip", $.ui.tooltip, {
options:{
tooltipClass: "your_class-Name",
}
});
