I have a small div that I'm using sort of as a tooltip to give certain information. It's called resizetip. I have another div which is resizable, I used jQuery resizable like this:
$this.resizable(); Now, during resize, I want the tip div to be visible at the user's mouse coordinates. So while the user is resizing the DIV, there's this little tooltip giving some info, following the mouse during resize. When the user stops resizing, the tip disappears. This is my code, which works perfectly find in FF and Chrome, but I need to make it work for IE8 too:
/* some code where we the resizable DIV is $this */ $this.on("resizestart", function(event,ui){ $('#resizetip').show(); }); $this.on("resize", function(event,ui){ $tip = $('#resizetip'); $tip.css('left',event.originalEvent.clientX+"px"); $tip.css('top',event.originalEvent.clientY+"px"); }); $this.on( "resizestop", function( event, ui ){ $tip = $('#resizetip'); $tip.hide(); });While the user is resizing, all is fine.
But what happens after that in IE8 is that the moment a user moves the mouse over the resizable div (even just to click the "Close" link), the tip follows the mouse around again, although it was only supposed to do that during the resize operation, which is now stopped. It seems that IE8 has decided that the resize event is not only still working but has also transformed into a mouseover event. What's the workaround here?
I've made a JSFiddle with a simplified version of my issue:
This fiddle works as expected. But in IE8, even after the stop event, the tooltip keeps following the mouse around.