on a moving element don't fire the mouse events

Question

a tooltip will show when mouse over a moving div, but ,the div is moving,it doesn't fire the mouse events,see the problem: http://jsfiddle.net/jcezG/6/ (firefox 23.0.1 is ok). `

$('.area').on('mouseenter',function(){
    $('.tooltip').show();
}).on('mouseleave',function(){
    $('.tooltip').hide();
});
var offset = 10;
setInterval(function(){
    //$('.area').hide();
    $('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)"});
    //$('.area').css({"left":offset+'px',"top":offset+'px'});
    offset += 10;
},1000);

`

forgive my poor english.

Answer 1

$('.area').on('mouseenter',function(){
    $('.tooltip').show();
}).on('mousemove', function(e){
   $('.tooltip').css({'top':e.pageY,'left':e.pageX, 'z-index':'1'});
}).on('mouseleave',function(){
    $('.tooltip').hide();
});

var offset = 10;
setInterval(function(){
    //$('.area').hide();
    $('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)","-moz-transform":"translate("+offset+"px,"+offset+"px)"});
    //$('.area').css({"left":offset+'px',"top":offset+'px'});
    offset += 10;
},1000);

Check this line "$('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)","-moz-transform":"translate("+offset+"px,"+offset+"px)"}); //$('.area').css({"left":offset+'px',"top":offset+'px'});" Is that the way you want ? check the fiddle JSFiddle

Answer 2

can you please replace your code with this

and set left and top postion at time of mouseover

$('.area').on('mouseenter',function(){
     $('.tooltip').show();
}).on('mousemove', function(e){
     $('.tooltip').css({'top':e.pageY,'left':e.pageX});
}).on('mouseleave',function(){
     $('.tooltip').hide();
});

and set z-index:100; in tooltip class

Demo

Answer 3

you have to use the div position as well as mouse pointer position and fire same effect on mouseenter and mousemove to get the latest position of mouse pointer.

var x,y;

$('.area').on('mouseenter mousemove',function(e){
    //console.log(e.pageX + "|" + e.pageY);
    x= e.pageX;
    y=e.pageY;
    $('.tooltip').css({'top':e.pageY,'left':e.pageX + 15, 'z-index':'1'}).show();
}).on('mouseleave',function(){
    $('.tooltip').hide();
});

Check this fiddle for more detail