Tooltip problem with jQuery
I have a table in which some adjacent cells have the same class (someClass
). I would like to display a tooltip when the mouse hovers one of these cells. Here is how I implemented this:
/* HTML code */
<div id="tooltip"><div>
/* CSS code */
#tooltip {
display: no开发者_运维知识库ne;
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 2px 5px;
color: #333;
font-size: 20px;
}
/* jQuery code */
$(".someClass").hover(function(e) {
$("#tooltip").html("Shalom")
.css("top", (e.pageY - 10) + "px")
.css("left", (e.pageX + 20) + "px")
.fadeIn("fast");
},
function() {
$("#tooltip").html("").hide();
});
$(".someClass").mousemove(function(e) {
$("#tooltip").css("top", (e.pageY - 10) + "px")
.css("left", (e.pageX + 20) + "px");
});
The problem is when the mouse leaves a cell and enters an adjacent cell, the tooltip disappears and appears again, which doesn't looks nice.
How could I prevent from the tooltip to disappear and appear again ?
Thanks !
Untested code snipped, requires a tooltip to be identified by #tooltip_id
var some_object = {
about_to_be_closed: false,
close_unless_needed: function() {
if (some_object.about_to_be_closed) {
$(some_object.about_to_be_closed).fadeOut();
}
}
};
// code to be executed on close
some_object.about_to_be_closed = tooltip_id;
window.setTimeout(close_unless_needed, 100)
// code to be executed on open
if (some_object.about_to_be_closed == tooltip_id) {
some_object.about_to_be_closed = false;
}
It's not really a reliable solution but I it could work.
精彩评论