javascript 如何使用 jQuery UI 工具提示在打开时更改工具提示颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26135451/
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
How to change tooltip color on open using jQuery UI Tooltip?
提问by 5earch
I'm trying to achieve the following, can't figure out how though. I have several tooltips on a page, but I want each one to look different (depending on severity for instance). Here is what I have so far:
我正在尝试实现以下目标，但不知道如何实现。我在一个页面上有几个工具提示，但我希望每个工具提示看起来都不同（例如取决于严重性）。这是我到目前为止所拥有的：
<div id="container">
<a href="#" title="Tooltip 1" data-severity="warning">Tooltip 1 (Warning)</a>
<a href="#" title="Tooltip 2" data-severity="danger">Tooltip 2 (Danger)</a>
</div>
<script type="text/javascript">
// init tooltip
ArrowToolTip.init('container');
</script>
/*JAVASCRIPT*/
var ArrowToolTip = {
init: function (parentId) {
jQuery('#' + parentId).tooltip(
{
content: function () {
var element = jQuery(this);
return element.attr('title');
},
create: function () {
var element = jQuery(this);
var severity = element.data('severity');
if (!severity) {
severity = 'default';
}
element.tooltip('option', 'tooltipClass', severity);
},
open: function(event, ui) {
var element = jQuery(this);
var severity = element.data('severity');
ui.tooltip({
tooltipClass: severity
});
//ui.tooltip.tooltipClass(severity);
console.log(event);
console.log(ui);
}
});
}
}
Whatever I have in the create: works, but it's only called on page load, so that doesn't do me any good. So now I'm trying to move this to the open:event. But that doesn't seem to work at all. The jQuery(this)doesn't return the hovered element, it returns the container. How can I get the correct element to select the data attribute? And how can I then change the CSS class? Does anyone know how this could be achieved?
无论我在 create: 中有什么，都可以，但它只在页面加载时调用，所以这对我没有任何好处。所以现在我想把它移到open:事件中。但这似乎根本不起作用。将jQuery(this)不返回悬停的元素，它返回容器。如何获得正确的元素来选择数据属性？然后我该如何更改 CSS 类？有谁知道这是如何实现的？
采纳答案by brasofilo
I didn't get your logic very well, but here's how I achieve different classes depending on data-severity. Instead of applying .tooltip()to all elements, iterate through them and set the tooltipClassas $(this).data('severity'). The content function allows to add a class too.
我没有很好地理解你的逻辑，但这是我如何根据data-severity. 不是应用于.tooltip()所有元素，而是遍历它们并将其设置tooltipClass为$(this).data('severity')。content 函数也允许添加一个类。
$('a.tips').each(function () {
var severity = $(this).data('severity');
$(this).tooltip({
content: function () {
return '<em>' + $(this).attr('title') + '</em>';
},
tooltipClass: severity,
show: "slideDown",
open: function (event, ui) {
ui.tooltip.hover(function () {
$(this).fadeTo("slow", 0.5);
});
}
});
});.ui-tooltip {
padding: 10px 20px;
border-radius: 20px;
font: bold 14px"Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.ui-tooltip.warning {
color: #E3E8F7;
background: #D94AA4;
}
.ui-tooltip.danger {
color: #212942;
background: #CABA75;
}
a.tips { float:left; margin: 0 10px; text-decoration:none; font: Sans-Serif; }
body { background-color:#eee; padding: 30px; }<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.tooltip.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="container">
<a href="#" title="Tooltip 1" class="tips" data-severity="warning">(Warning)</a>
<a href="#" title="Tooltip 2" class="tips" data-severity="danger">(Danger)</a>
</div>回答by dennypanther
i am not clear about your quection. But i hope this will help you sometimes....
我不清楚你的问题。但我希望这有时会帮助你......
I am using tooltipClass name as "tooltipclass" in my jquery.
我在我的 jquery 中使用 tooltipClass 名称作为“tooltipclass”。
$(document).tooltip({effect: "blind", duration: 1000, tooltipClass: 'tooltipclass'});
And using that class name you can give any styling to the tool tip.
使用该类名，您可以为工具提示设置任何样式。
.tooltipclass{
font-size: 12px;
border:1px solid #e74c3c;
}
so try using different tooltipClass names.........
所以尝试使用不同的工具提示类名称......
