我正在使用 js 库 qtip 工具提示。当我将鼠标悬停在表格中的悬停行上时,我想让 qtip 工具提示随光标移动。我知道如何让我自己的工具提示随光标移动,但我在使用 qtip 时遇到了困难。请解释您回答的代码。谢谢
My html:
<table>
<div id="hoverdiv"></div>
<tr class="hover" hovertext="Some text">
<td>Total Credits</td>
<td><%= @total_credit %></td>
</tr>
</table>
我可以使用以下 jquery 代码创建一个普通的工具提示(没有 qtip js lib)来跟随我的光标
$(document).ready(function() {
$('.hover').mousemove(function(e) {
var hovertext = $(this).attr('hovertext');
$('#hoverdiv').text(hovertext).show();
$('#hoverdiv').css('top', e.clientY+10).css('left', e.clientX+10);
}).mouseout(function() {
$('#hoverdiv').hide();
});
});
以及显示静态 qtip 工具提示的代码:
$(document).ready(function() {
$('.hover').each(function() {
$(this).qtip({
content: $(this).attr('hovertext')
});
});
});
这是我到目前为止所尝试过的:
$(document).ready(function() {
$('.hover').mousemove(function(e) {
$(this).qtip({
content: $(this).attr('hovertext')
});
$('').css('top', e.clientY+10).css('left', e.clientX+10);
});
});
根据qTip 文档 http://craigsworks.com/projects/qtip2/docs/position/:
当position.target设置为mouse时,该选项决定
当鼠标悬停在工具上时,工具提示是否跟随鼠标
显示.目标。
Example:
$('.selector').qtip({
content: {
text: 'I follow the mouse whilst I\'m visible. Weeeeee!'
},
position: {
target: 'mouse',
adjust: {
mouse: true // Can be omitted (e.g. default behaviour)
}
}
});
And a jsFiddle 示例 http://jsfiddle.net/j08691/kSLxR/10/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)