Jquery затухание

Я пытаюсь использовать jquery fadetoggle для плавного затухания и затухания. Все работает хорошо, кроме одного. Когда вы наводите курсор на абзац, всплывающая подсказка появляется, а когда вы покидаете абзац, всплывающая подсказка исчезает, но когда вы наводите абзац и сразу после этого наводите всплывающую подсказку, она быстро исчезает и исчезает снова. Как я могу избавиться от этой анимации? Я имею в виду, что всплывающая подсказка не должна исчезать, когда я навожу ее. Он должен исчезать только при наведении курсора на абзац

css

p{position: relative; cursor: default;}
#tooltip{display: none; position: absolute; top: -28px; left: 0px; padding: 1px 10px; border-radius: 13px; background: #3DD13D; color: #fff;}

HTML

<p>Text which has meta info when hovered<span id="tooltip">Hi im meta info</span></p>

js

$(document).ready(function(){   
    $('p').hover(function(){
        $('#tooltip').fadeToggle("500", "linear", "true")
    })
});