如何使QTip提示框随光标移动

Question

我是一名使用 qtip 工具提示的 JavaScript 库的用户。我希望当我在表格的悬停行上悬停时，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库）来跟随我的光标。

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

- Hishalv

Answer 1

根据 qTip 文档，当 position.target 设置为 mouse 时，此选项确定当将鼠标悬停在 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 示例。

- j08691

---

有没有可能在位置上调用我们的函数？当我移动光标时，我想将提示从左到右和从右到左移动。 - muthu

@muthu - 你最好在这里开始自己的问题，而不是在评论中提问。 - j08691

如果将工具提示放在链接上，则工具提示会跟随鼠标移动，但链接不会打开... - leccionesonline

这似乎不是用户所要求的，也不是Muthu提出的。他们希望工具提示随着鼠标在元素周围移动而移动。所有这段代码做的就是在鼠标第一次经过元素时将工具提示设置在鼠标位置。之后它不会随着鼠标移动而移动。 - Rikaelus