CODEWITHSUNDEEP
javascriptjqueryhtml
Mark Kramer
Mark Kramer

Reputation: 3214

How to get tooltipsy to move with the mouse

I've been working on making a change to the jQuery add-on tooltipsy so that it locks on-to the mouse.

Getting it to do this is a simple task, all you have to do is change the showEvent to 'mousemove' however, because that is the show event, every time you move the mouse it has to redo the entire tooltipsy function for every pixel you moved, so the box doesn't keep up properly with the mouse.

Also, because of a problem with the lagging box and mouseleave, the box doesn't usually hide properly on mouseleave (because the function as to be run for every pixel your mouse moves so it's still computing after you mouseout)

This problem would ordinarily be easy to solve. All you would have to do is split the show hide and move into three different events. (mouseenter, mouseleave, and mousemove respectively) however, getting this to work in the context of tooltipsy is a much more complicated matter.

Here is the example: http://jsfiddle.net/MarkKramer/HwpEs/2/

Notice how on the third div I got it to follow the cursor, but it is using mousemove as the showEvent, when really mousemove should only be used to get the coordinates of the tooltips.

If someone can solve this I will be very grateful.

Update: I tried putting if alignTo = cursor in a mousemove, which would work except that the function messes with the variable's scope.

Upvotes: 1

Views: 620

Answers (1)

Blender
Blender

Reputation: 298582

That plugin seems to be way too complicated if you want basic tooltip behavior.

The code for a tooltip like that is quite simple:

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

If you want a live demo, here ya go: http://jsfiddle.net/DR4Wv/6/

Upvotes: 2

Related Questions