我正在尝试使用qTip2显示一个html内容工具提示,点击任何与类#34; bb"的链接。当您点击任何带有课程' bb'的链接时,工具提示会打开包含课程' tooltiptext'的div。当你点击另一个链接与班级' bb' (或页面上的任何位置),第一个工具提示关闭,第二个工具提示在该链接上方打开(或者如果您没有点击另一个链接,则只关闭工具提示)。
我设法让工具包开启和关闭,但只有第二个链接显示了html内容。
有什么想法吗?
非常感谢!
<script>
$(document).ready(function()
{
$('a.bb').each(function() {
$(this).qtip({
show: 'click',
hide: 'unfocus',
content: {
text: $(this).next('.tooltiptext')
}
});
});
});
</script>
<style type="text/css">
.tooltiptext{
display: none;
}
<body>
<a class="bb" href="#test">Click me!</a>
<a class="bb" href="#test">Click me again!</a>
<div class="tooltiptext">
Complex <b>inline</b> <i>HTML</i> in your <u>config</u>
</div>
<!-- Qtip -->
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css">
<script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
</body>
答案 0 :(得分:0)
jQuery next()
只接受紧随其后的兄弟节点,因此对于第一个链接a
,它获得第二个链接,当您按类.tooltipnext
进行过滤时,所有获得的都是空选。
最好的方法是直接选择工具提示的类(或者甚至是id,因为它应该是唯一的)并使用html()
获取其html内容
无需使用each()
功能,因为qtip
已经适用于所有选定元素。
看起来应该是这样的:
$(document).ready(function() {
$('a.bb').qtip({
show: 'click',
hide: 'unfocus',
content: {
text: $('.tooltiptext').html()
}
});
});