Jquery 创建可悬停的工具提示

这是我正在尝试的一个例子

我基本上是在尝试创建工具提示效果。但是当我浏览工具提示区域时，框会闪烁。这是由于触发了

mouseleave

和

mouseenter

基本的，结构是这样的

<section id="tooltipContainer">
    <ul>
        <li>
            <a>Text that is show up</a>
            <div class="extension"> <!-- Tool Tip Division -->
               text
            </div>
        </li>
    </ul>
</section>

如何避免触发

mouseleave

和

mouseenter

更新：

通过切换填充值，我能够消除闪烁，但因为容器也有

溢出：隐藏所以现在阻止整个工具提示。有什么想法吗

以下是此次更新的要点：
您的第二个要点非常混乱，它隐藏了工具提示，但第一个很好。对我来说，它根本不闪烁（chrome），它的行为就像工具提示一样——在悬停时显示，当我移开鼠标时消失

我建议您使用，这是一个很好的jQuery插件，可以帮助您更快/更容易地完成任务，并且具有更高的跨浏览器兼容性。
我不寻找替代方案。我想在上面使用一个非常简单的编码。我也在使用chrome，在第一把小提琴中，指尖总是淡出，然后又淡出。试试这个。当我将鼠标指针放在“portfo”或“other 2”框上时，它只会按预期显示工具提示，没有任何闪烁。当我把鼠标移出其中一个区域后，它就消失了。这真是最糟糕的闪动。现在它蹦蹦跳跳，蹦蹦跳跳。当闪烁发生时，请查看控制台输出，它应该打印出一组显示/隐藏消息以及触发这些事件的对象。我无法复制它，它按预期工作。如果你能发布日志，我可能会提供更多帮助。请再次查看我的问题，你的小提琴在悬停在工具提示上时完全忽略了
？
$("li").on('mouseenter', function() {
    $(this).children(".extension").stop().fadeIn();
}).on('mouseleave', function() {
    $(this).children(".extension").stop().delay(500).fadeOut();
});​