Question

Am confused on how to handle this below problem.
I have a table, and on specific rows matching my criteria, when user mouseover that row, am showing a another div just below the mouse pointer. Now i have to click inside that div. But that div is changing its location as am moving mouse. Below is code am trying

    $('#dataTable td').live('mousemove', function (e) {
    if( $(this).hasClass('false'))
        $('.toolTip').css({"top": (e.pageY+10)+"px", "left": (e.pageX - 10)+"px"}).show();
});

$('#dataTable td').live('mouseout', function (e) {
        $('.toolTip').hide();
});

So the toolTip div is displayed correctly when I reached a specific . Now how do I click inside that toolTip.

Answer 1

You would need to use mouseover event instead of mousemove. Also, make sure the DIV below the row you have your mouse over is positioned so that there’s no gap between the row and the new DIV, or it will hide your tooltip.

Example:

$('#dataTable td').live('mouseover', function (e) {
    if( $(this).hasClass('false'))
        $('.toolTip').css({"top": (e.pageY+10)+"px", "left": (e.pageX - 10)+"px"}).show();
});

$('#dataTable td').live('mouseout', function (e) {
        $('.toolTip').hide();
});