Отображение div при наведении курсора постоянно мерцает

Когда пользователь наводит курсор на глификон ?, я хочу отобразить информационную карточку, которая следует за курсором мыши.

Я добился этого с помощью приведенного ниже кода, но при наведении курсора на значок div постоянно мигает, как стробоскоп, при использовании Хром.

В IE он работает нормально, а в Firefox div вообще не отображается

Почему?

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;
}