[英]Using a jquery tooltip more than once on the same page
我在asp.net转发器元素上使用jquery工具提示。
<div class="tooltip" style="display: none">
<div style="text-align: center; font-weight: bold;">
<%# Eval("Name") %><br />
</div>
</div>
$(function () {
var du = 1000;
var tooltip;
$(document).tooltip({
show:{effect:'slideDown'},
items: "h5",
content: function () {
tooltip = $(this).siblings('.tooltip');
return tooltip.html();
}
});
});
我现在必须实现帮助功能。 应该有一个帮助图标,在单击该图标后,应该会弹出一个带有说明的弹出窗口,我想再次使用jquery工具提示。 我这次不知道如何实现它,应该在上面相同的$ function()中包括它还是应该使用另一个函数?
如果有人有任何想法,请告诉我。
编写方式,您不必再做任何JavaScript。 与tooltip
类具有同级的任何<h5>
元素都将被激活。 您所要做的就是在要激活它的.tooltip
旁边放一个.tooltip
div。 例:
<ul>
<li>
<h5>Here is thing 1.</h5>
<div class="tooltip" style="display: none">This is tooltip 1.</div>
</li>
<li>
<h5>Here is thing 2.</h5>
<div class="tooltip" style="display: none">This is tooltip 2.</div>
</li>
</ul>
如果您希望工具提示适用于h5
以外的其他元素,请修改items
选项:
items: "h5, img.help-icon",
确保每个触发器/工具提示对都是兄弟姐妹,并确保每对触发器周围都有某种包装器,以显示哪个工具提示与哪个元素一起使用。 例如,这将无法正常工作:
<li>
<div>
<h5>Here is thing 1.</h5>
</div>
<div class="tooltip" style="display: none">This won't show up at all!</div>
</li>
这也不会:
<li>
<h5>Here is thing 1.</h5>
<div class="tooltip" style="display: none">This will be the text for both tooltips!</div>
<h5>Here is thing 2.</h5>
<div class="tooltip" style="display: none">This won't show up at all!</div>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.