我正在尝试将鼠标悬停在图标上：
<div class="question-description-tooltip" style="display:inline-block;">
<img class="question-icon" src="icon.png" />
<span class="question-description-tooltip-text">Description</span>
</div>
$('.question-icon').on({
mouseenter: function (event) {
showTooltip(event,this);
},
mouseleave: function () {
$('.question-description-tooltip-text').css('visibility','hidden');
}
});
因此，当我将鼠标悬停在图标上时，mouseenter和mouseleave事件会不断触发，因此工具提示会闪烁，不知道为什么。
Css元素：
.question-description-tooltip .question-description-tooltip-text {
background-color: #4c4c4c;
visibility: hidden;
white-space: pre-wrap;
color: #fff;
text-align: center;
border-radius: 6px;
/*Position the tooltip*/
position: absolute;
z-index: 1;
padding: 7px;
}
showTooltip函数：
showTooltip(e, ui){
//calculate margins so I reposition tooltip it is above icon,
because description always has differen width and height
var descriptionTooltip = $(ui).parent().find('.question-description-tooltip-text');
descriptionTooltip.css("margin-left", -marginLeft);
descriptionTooltip.css("margin-top", -marginTop);
$(ui).parent().find('.question-description-tooltip-text').css('visibility', 'visible');
}