如何在div内容中应用qTip? [英] How to apply qTip in div content?
本文介绍了如何在div内容中应用qTip?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在qTip的一个工具提示容器中同时获取工具提示标题"和工具提示文本"?当鼠标悬停在上方时，工具提示将在qTip中显示工具提示标题和工具提示文本，当鼠标悬停在新的跨度上时，新的工具提示标题和工具提示文本将相应地更改.请建议如何做?
How could I get the "Tooltiptitle" and "Tooltiptext", both in one tooltip container, in qTip? When the mouse is over , then the tooltip will show the tooltiptitle and tooltiptext in qTip, the new tooltiptitle and tooltiptext will change accordingly when mouseover the new span. Please advice how to do it?
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<body>
<table>
<tr class="row2">
<td class="col1">
<div class=""><span class="">Brad Pitt</span></div>
<div class="tooltiptitle">Brad Pitt</div>
<div class="tooltiptext">Angelina Jolie's husband. Father of six, husband of one. </div>
</td>
<td class="col2">
<div class=""><span class="">Jennifer Aniston</span></div>
<div class="tooltiptitle">Jennifer Aniston</div>
<div class="tooltiptext">Brad Pitt's Ex-Wife.</div>
</td>
</tr>
</table>
</body>
推荐答案
我会这样处理:
<head>
<title></title>
<style type="text/css">
.tip-content { display: none; }
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script type="text/javascript">
// On DOM ready...
$(function() {
$('.tip').each(function() {
var tipContent = $(this).next('.tip-content').html();
$(this).qtip({
content: tipContent,
show: 'mouseover',
hide: 'mouseout'
})
});
});
</script>
</head>
<body>
<table>
<tr class="row2">
<td class="col1">
<span class="tip">Brad Pitt</span>
<div class="tip-content">
<div class="tooltiptitle">
Brad Pitt</div>
<div class="tooltiptext">
Angelina Jolie's husband. Father of six, husband of one.
</div>
</div>
</td>
<td class="col2">
<span class="tip">Jennifer Aniston</span>
<div class="tip-content">
<div class="tooltiptitle">
Jennifer Aniston</div>
<div class="tooltiptext">
Brad Pitt's Ex-Wife.</div>
</div>
</td>
</tr>
</table>
</body>
</html>
这篇关于如何在div内容中应用qTip?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
