Question

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: none;
    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 !

Answer 1

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.