Display div on hover flickers constantly

Question

When a user hovers over the ? glyphicon, I want to display a information card which follows the mouse around.

I achieved this with the below code, but then hovering over the icon, the div flickers constantly like a strobe light when using Chrome .

In IE it works fine, and in Firefox the div doesn't appear at all

Why?

HTML

<span class="glyphicon glyphicon-info-sign"></span>
<div id="machinesInfo" class="infoCard">
    some cool text
</div>

JQuery

$(document).on('mousemove', function(e){
    $('.infoCard').css({
        left:  e.pageX,
        top:   e.pageY
    });
});

CSS

.infoCard {
    display: none;
    position: absolute;
}

.glyphicon-info-sign:hover + .infoCard {
    display: block;
}

Answer 1

Adjusted my JS to

$(document).on('mousemove', function(e){
    $('.infoCard').css({
        left:  e.pageX + 20,
        top:   e.pageY + 20
    });
});

and it now works great