jQuery hover срабатывает несколько раз. Ни одно решение не помогает

Question

У меня есть популярная проблема с jQuery. При наведении курсора мыши на область вихревого элемента Hover срабатывает несколько раз. Я пробовал много изменений между mouseenter, mouseleave, hover функциями, я пытался предотвратить событие и даже stopImmediatePropagation(). Никто не работает. Цель состоит в том, чтобы показать подсказку при наведении курсора и скрыть ее, когда мышь уходит.

Мой HTML (С TWIG Без SVG она до сих пор не работает..):

<div class="clock info" data-title="04:00 pm!">{% include 'icons/clock.svg.twig' %}</div> 

Моего JQuery (Часть кода позиционирования подсказки внутри.):

$('.info').hover(function(e){ 
    e.stopImmediatePropagation(); 
    $("#infotitle").css("display", "block"); 
    var position = $(this).offset(); 
    $("#infotitle-text").html($(this).data('title')); 
    infotitle_h = 18 + $("#infotitle-text").height(); 
    margin = $("#infotitle-text").width()/2; 
    $("#infotitle").stop(true,true).css("left", position.left - margin); 
    $("#infotitle").stop(true,true).css("top", position.top - infotitle_h); 
}, function(e){ 
    e.stopImmediatePropagation(); 
    $("#infotitle").stop(true,true).css("display", "none"); 
}); 

подсказка HTML:

<div id="infotitle"> 
    <div id="infotitle-text">Simple basic title for example.</div> 
    <div id="infotitle-triangle"></div> 
</div> 

подсказке CSS:

#infotitle 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    text-align: center; 
    z-index: 100; 
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.2)); 
    display: none; 
} 

#infotitle-text 
{ 
    font-size: 14px; 
    color: white; 
    background-color: fade(@lightblue, 100%); 
    text-align: center; 
    padding: 3px; 
    padding-left: 10px; 
    padding-right: 10px; 
    border-radius: 2px; 
    z-index: 100; 
} 

#infotitle-triangle 
{ 
    display: inline-block; 
    position: realtive; 
    margin-bottom: 10px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 10px 10px 0 10px; 
    border-color: fade(@lightblue, 100%) transparent transparent transparent; 
} 

Всплывающая подсказка показывает и скрывает в целом хорошо, но если я перемещаю мышь на область парящего элемента, она отображается и скрывается несколько раз, когда она должна быть видимой все время, когда я это делаю.

За помощью и благодарю вас.

Answer 1

его из-за div.infortitle места на верхней части div.info, где мышь попадает поверх div.infortitle эффект зависания заканчивается и возвращается.

удалить обивка: 3px на # infortitle-текст

удалить краю дна: 10px; on # infotitle-triangle

Answer 2

Это действительно плохой способ отображения всплывающей подсказки. Предопределите внешний вид всплывающей подсказки, установите его для отображения: none, а затем, на hover addClass, который будет отображаться: block; свойство или .show() с jquery, если нужно.

Изменение css, как вы, действительно, действительно плохая практика.