Блог

Я работал над внесением изменений в дополнение tooltipsy к jQuery, чтобы оно фиксировалось на мыши.

Заставить его сделать это — простая задача, все, что вам нужно сделать, это изменить showEvent на ‘mousemove’ однако, поскольку это событие show, каждый раз, когда вы перемещаете мышь, ему приходится переделывать всю функцию tooltipsy для каждого перемещенного вами пикселя, поэтому окно не поддерживается должным образомс помощью мыши.

Кроме того, из-за проблемы с запаздывающим полем и mouseleave поле обычно не скрывается должным образом в mouseleave (потому что функция, которая должна выполняться для каждого пикселя, который перемещает ваша мышь, поэтому он все еще вычисляется после наведения курсора мыши)

Обычно эту проблему легко решить. Все, что вам нужно будет сделать, это разделить show hide и move на три разных события. (mouseenter, mouseleave и mousemove соответственно) однако заставить это работать в контексте tooltipsy гораздо сложнее.

Вот пример: http://jsfiddle.net/MarkKramer/HwpEs/2 /

Обратите внимание, как на третьем div я заставил его следовать за курсором, но он использует mousemove в качестве showEvent, когда на самом деле mousemove следует использовать только для получения координат всплывающих подсказок.

Если кто-то сможет решить эту проблему, я буду очень благодарен.

Обновление: я попытался поместить if alignTo = cursor в mousemove, что сработало бы, за исключением того, что функция нарушает область действия переменной.

Этот плагин кажется слишком сложным, если вам нужно базовое поведение всплывающей подсказки.

Код для такой всплывающей подсказки довольно прост:

 $('#tooltip-container').mousemove(function(e) {
    $('#tooltip').css('left', e.pageX   20);
    $('#tooltip').css('top', e.pageY   20);
});


$('#tooltip-container').mouseleave(function() {
    $('#tooltip').hide();
});

$('#tooltip-container').mouseenter(function() {
    $('#tooltip').show();
});
  

Если вы хотите живую демонстрацию, вот она: http://jsfiddle.net/DR4Wv/6 /