Jquery 尝试使用show（）和hide（）时发生闪烁效果

我正在尝试为我正在构建的网页创建工具提示功能。我有一个元素表，其中一列包含简短的描述。我试图创建一种效果，用户将鼠标悬停在简短的描述上，我显示隐藏的div标记中的完整描述

悬停效果正在发挥作用，但是如果我向下移动到原始div标记之外的下一行，jquery就会进入混乱状态并闪烁，不允许我用鼠标在上面查看下面这一行的描述

如果我把鼠标向上移动，效果很好

我的jquery函数看起来像

$('.alarms-desc').live('mouseover mouseout', function (event) {
var target = $(this).find(".tooltip");
if (event.type == "mouseout") {
    target.hide("fast");
}
if (event.type == "mouseover") {
    target.show("fast");
}

}))

我的css看起来像

.tooltip {
display:none;
margin:0 10px 1em 0;
padding:8px;
background:#fcfcfc;
border:1px solid #e1e1e1;
line-height:130%;
background-color: #DCDCDC;
border: solid 1px #DCDCDC;
border-radius: 4px;
-moz-border-radius: 4px;
max-width: 500px;
position: absolute;
}

.alarms-desc
{
display: block;
}

一些html

<div id="AD_40ba5b52-8a8e-40cf-99e3-fbb9cbea8863" class="alarms-desc">

My short descrip 1
<div id="tool_40ba5b52-8a8e-40cf-99e3-fbb9cbea8863" class="tooltip">This is my long    description that extends a long way.............................</div>
</div>
<div id="AD_40ba5b52-8a8e-40cf-99e3-fbb9cbea8864" class="alarms-desc">

 My short descrip 2
 <div id="tool_40ba5b52-8a8e-40cf-99e3-fbb9cbea8864" class="tooltip">This is my long description that extends a long way.............................</div>
 </div>
 <div id="AD_40ba5b52-8a8e-40cf-99e3-fbb9cbea8865" class="alarms-desc">

  My short descrip 3
 <div id="tool_40ba5b52-8a8e-40cf-99e3-fbb9cbea8865" class="tooltip">This is my long description that extends a long way.............................</div>
 </div>

我的简短描述1
这是我的长篇描述，延伸了很长的一段路。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
我的简短描述2
这是我的长篇描述，延伸了很长的一段路。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
我的简短描述3
这是我的长篇描述，延伸了很长的一段路。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

---

有什么建议我需要更改吗？

有一个名为hoverIntent的jQuery插件，这可能会有所帮助。它不会立即触发mouseenter和mouseleave事件，而是等待鼠标光标静止一段时间（您可以调整灵敏度和超时），因此如果您快速悬停在每个项目上，只有最后一个悬停的项目才会显示工具提示。

这里有一个JSFiddle:-发生闪烁是因为你的工具提示模糊了它下面的div，你能把你的工具提示放在一边吗？理想情况下，我希望它们显示在下面，因为我认为当我有较长的简短描述时，它看起来会更好