How to make a qtip tooltip move with cursor

允我心安 提交于 2019-12-08 17:33:40

问题


i am using the js library qtip tooltip. I want to make the qtip tooltip move with my cursor as i hover over the hover row in a table. I know how to make my own tooltip move with my cursor but am struggling with qtip. Please explain the code it you answer. Thanks

My html:

<table>
    <div id="hoverdiv"></div>
    <tr class="hover" hovertext="Some text">
        <td>Total Credits</td>
        <td><%= @total_credit %></td>
    </tr>
</table>

I can create a normal tooltip(without qtip js lib) to follow my cursor using the following jquery code

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

});
});

And the code to display a static qtip tooltip:

$(document).ready(function() {
 $('.hover').each(function() {
  $(this).qtip({
     content: $(this).attr('hovertext')
  });
 });
});

This is what i have tried so far:

$(document).ready(function() {
$('.hover').mousemove(function(e) {

    $(this).qtip({
     content: $(this).attr('hovertext')
  });
    $('').css('top', e.clientY+10).css('left', e.clientX+10);
});
});

回答1:


According to the 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.

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 example.



来源:https://stackoverflow.com/questions/9608990/how-to-make-a-qtip-tooltip-move-with-cursor

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!