on a moving element don't fire the mouse event

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

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 2

$('.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 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