I am trying to create a tooltip function for a webpage I am building. I have a table of elements and one of the columns contains a short description. I am trying to create an effect where a user hovers over the short description and I display the full description from a hidden div tag.
The hover effect is working however if I move down to the next row outside of the orginal div tag, the jquery gets into a confused state and flickers and doesnt allow me to mouse over to view the description of the row below.
If I mouse upwards it works fine.
My jquery function looks like
$ ('.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");
}
});
My css looks like
.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;
}
Some of the 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>
Any suggestions what I need to change?
