我正在努力实现以下目标,但无法弄清楚如何.我在页面上有几个工具提示,但我希望每个工具提示看起来不同(例如,根据严重程度).这是我到目前为止：
<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);
}
});
}
}
无论我在创建中有什么：有效,但它只在页面加载时调用,所以这对我没有任何好处.所以现在我想把它移到open：event.但这似乎根本不起作用. jQuery(this)不返回悬停元素,它返回容器.如何获取正确的元素来选择数据属性？那我怎么能改变CSS类呢？有谁知道如何实现这一目标？
解决方法
我没有很好地理解你的逻辑,但这是我如何根据数据严重性实现不同的类.而不是将.tooltip()应用于所有元素,迭代它们并将tooltipClass设置为$(this).data(‘severity’).内容函数也允许添加类.
$('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>
