7

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);
});
});
Hishalv
  • 3,052
  • 3
  • 29
  • 52

1 Answers1

13

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Is there any possible to call our function in position? I want to move the tip from left to right and right to left when i move the cursor – muthu Dec 13 '12 at 15:01
  • @muthu - You should probably start your own question here instead of asking it as a comment to this question. – j08691 Dec 13 '12 at 15:02
  • if the tooltip is placed on a link, OK the tooltip follows the mouse, but the link does not get open... – leccionesonline Jan 23 '14 at 13:38
  • This doesn't seem to do what the user asked for or what muthu brings up. They want the tooltip to move as the mouse moves around the element. All this code does is set the toolip at the position of the mouse when the mouse first goes over the element. It doesn't move with the mouse after that point. – Rikaelus Nov 19 '15 at 18:45