Как заставить подсказку qtip двигаться с курсором - PullRequest
Новая
       37

Как заставить подсказку qtip двигаться с курсором

6 голосов
/ 08 марта 2012

Я использую подсказку qtip библиотеки js. Я хочу, чтобы подсказка qtip двигалась с моим курсором, когда я наводил указатель мыши на строку в таблице. Я знаю, как заставить мою собственную подсказку двигаться с моим курсором, но я борюсь с qtip. Пожалуйста, объясните код, на который вы отвечаете. Спасибо

Мой HTML: 

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

Я могу создать обычную подсказку (без qtip js lib), чтобы следовать моему курсору, используя следующий код jquery 

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

1 Ответ

11 голосов
/ 08 марта 2012

Согласно документам qTip :

Когда position.target установлен для мыши, эта опция определяет следует ли подсказка за мышью при наведении на 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 пример .

...