javascript - div跟随光标的困难

我试图显示一个工具提示每当人悬停在一个图像上，我也使工具提示跟随鼠标，工具提示将消失每当人离开图像所在的区域。这一切都很好，但是当我在工具提示后面向右移动光标时，它就会开始闪烁。我知道这是因为光标离开图像区域进入工具提示区域有一段时间。不知道该怎么解决。看看我的代码：
HTML格式：

<img id="mainImage" src="https://i1.wp.com/historiek.net/wp-content/uploads-phistor1/2015/09/Het-nieuw-logo-van-Google-e1441130561430.jpg?fit=663%2C282&ssl=1">
   <div id="toolTip">This is the logo of google</div>

JS公司：

    $('#mainImage').hover (
        $('#mainImage').on('mousemove', function(e) {
           $('#toolTip').css({
               'left' : e.pageX,
               'top' : e.pageY,
               'display' : 'block'
           });
        }),
        $('#mainImage').on('mouseout', function() {
            $('#toolTip').css('display', 'none');
        })
    );

提前谢谢。

最佳答案

在此页面的CSS中，在工具提示上设置pointer-events: none：

#toolTip {
  pointer-events: none;
}

这将导致忽略单击和悬停事件，因此工具提示将不再从其下面的元素中窃取悬停事件。