jquery - 如何使 qtip 工具提示随光标移动

Question

我正在使用js库qtip工具提示。当我将鼠标悬停在表格中的悬停行上时，我想让 qtip 工具提示随光标移动。我知道如何让我自己的工具提示随光标移动，但我在使用 qtip 时遇到了困难。请解释您回答的代码。谢谢

我的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);
});
});

Answer 1

根据qTip docs :

When the position.target is set to mouse, this option determines whether the tooltip follows the mouse when hovering over the show.target.

示例:

$('.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)
      }
   }
});

还有一个 jsFiddle example 。