CODEWITHSUNDEEP
javascriptjquery
boop
boop

Reputation: 7788

jQuery tooltip is stuttering

Images can explain better than words sometimes.

..

So I've a very weird problem with my self-written jquery tooltip (I actually want to avoid to use some lib, since my use-case is actually pretty simple and I don't need some bloated lib here).

When I move my mouse from right to left or from top to down everything is fine. When I move my mouse from left to right or bottom to top my tooltip gets stuttering - see the gif.

My tooltips are referenced by data attributes

<a href="#" data-tooltip="#myTooltip">HOVER ME</a>
<div id="myTooltip">Tooltip Content Foo Bar</div>

To avoid problems positioning my element I'll move it later wit jQuery to the body.

Well, now I've now idea whats going on with my tooltip. Any ideas why it is stuttering?
BTW: This is happening in all modern browsers for me.

$(function () {

    $('[data-tooltip]').each(function () {

        $($(this).data('tooltip')).appendTo('body');

        // this mouseenter listener could be safely removed, probably
        // (don't forget to move the display:block part to mousemove tho)
        $(this).on('mouseenter', function (e) {
            $($(this).data('tooltip')).css({
                display: 'block',
                left: e.pageX,
                top: e.pageY
            });
        });
        $(this).on('mousemove', function (e) {
            $($(this).data('tooltip')).css({
                left: e.pageX,
                top: e.pageY
            });
        });
        $(this).on('mouseleave', function () {
            $($(this).data('tooltip')).hide();
        });
    });

});

Upvotes: 1

Views: 108

Answers (1)

Chris
Chris

Reputation: 997

I think I found a solution for you. Might not really what you wanted but I think it will work for what you want to use it for.

Here is the JSfiddle: http://jsfiddle.net/nj1hxq47/3/

Ok so the key is to make sure the mouse never goes over the element you are dragging. So making sure you have at least 1 xp between the element you are dragging and the element you are hovering over will make sure it does not trigger the onleavemouse event.

var yPos = e.pageY + 5;

I am sure there is a better way to do this... but I hope this helps.

EDIT: The main problem is the mouse is going over the element you are moving to the mouse's position and thus triggering the onmouseleave event resulting in the element being hidden and shown in milliseconds of each other. Because the mouse leave event triggers before the move.

Upvotes: 2

Related Questions