views:

18

answers:

2

I have an image in a page and in the "onmouseover" event of that image I will call a javascript function to show a tooltip and in the "onmouseout" of the image, i will call a method to hide the tooltip.Now i found that when i place the cursor on the image,its calling the method to show the tooltip div.and if i move the mouse WITHIN the image,Its calling the onmouseout event(Even if i am not OUT of the image).How can i stop this . I want onmouseout to be called when i the cursor is out of the image ? Any thoughts ? Thanks in advance

Here is how i call it

 <img src="images/customer.png" onmouseout="HideCustomerInfo()" onmouseover="ShowCustomerInfo(485)" />

and in my javascript

 function ShowCustomerInfo(id) {


 var currentCustomer = $("#hdnCustomerId").val();   
 if (currentCustomer != id) { // to stop making an ajax call everytime when the mouse move on the same image

     $.get('../Lib/handlers/userhandler.aspx?mode=custinfo&cid=' + id, function (data) {
         strHtml = data;
     });

     tooltip.show(strHtml);   // method in another jquery pluggin
     $("#hdnCustomerId").val(id);
 }
}

function HideCustomerInfo() {

 tooltip.hide();    // method in another jquery pluggin
 $("#hdnCustomerId").val(0); //setting in a hidden variable in the page

 }
+1  A: 

I am assuming you are mousing over your tooltip? and the tooltip has its markup outside the realm of the image?

So by mousing over the tooltip you are technically leaving the image. I have had similar things happen to me.

To get around this, try sticking a div around the image, and putting the mouse even on the div, then as a child element to the div have your tooltip, so even when you are then mousing over the tooltip, you are still inside the div.

That might work.

jimplode
Not mousing over tooltip.But mousing over the image where i attached the tooltip showing method on the mouseover event
Shyju
can you add your markup and code?
jimplode
try binding to mouseleave instead of mouseout?? Is this using jquery??
jimplode
yes.its using jquery.i added markup
Shyju
I have tried your code and it works..... There must be something to do with the tooltip, I removed all the stuff in your functions and just had alerts, I had one fire on mouseover and the other fire when I left the image. I did not get hundreds of calls when moving over the image either. try moving the markup around the tooltip, so it displays the data away from the image.
jimplode
I did a close investication and realized that when i make a mouse move on the image,It is entering into the tooltip div and thus calling mouseout of the image.My tooltip was close to the cursor(so close to the image too). I just changed the css of the tooltip to make it 50 px away from the cursor so that my cursor wont enter back to the tooltip. Thanks jimplode for guiding this aspect. It worked
Shyju
Happy to help! :) Glad you got it solved.
jimplode
A: 

Are you sure HideCustomerInfo() is called by the onmouseout event handler of the image? Also, what browsers do you get that in? Do you get this behavior in one particular browser?

bugventure