4

When hovering over an element my site creates a tool tip. When the mouse stops hovering over the element, an mouseout event is called, the tooltip is removed, and all is right with world. Except that sometimes, a user moves their mouse so quickly that by the time the tooltip has been created, the mouse is no longer inside the element. This means the tooltip does not disappear unless the user mouses over and mouses out of the element.

My solution is, after creating the tooltip, to check if the mouse is over the required element, and if it is not, to remove it. Unfortunately I do not know how.

I tried these solutions, but they both require an mouseout event in order to work. Am I missing something, or is there another (hopefully better) way to find if the mouse is currently not over an element?

Community
  • 1
  • 1
Holtorf
  • 1,451
  • 4
  • 21
  • 41

1 Answers1

2

It sounds like the browser is throwing MouseOut events and you are ignoring them. Consider binding MouseOut events be default to a handler, even if you haven't set up a tooltip yet.

I would expect that for every MouseIn event, there is a MouseOut event. If that is not the case in the spec or in this particular browser, you have a problem. In this terrible scenario, you can cancel the tooltip after perhaps a second.

ninjagecko
  • 88,546
  • 24
  • 137
  • 145
  • 1
    I found that there was another div that covered the element that was supposed to be throwing the mouseover/mouseout events. Replacing that div fixed my problems. – Holtorf Apr 25 '12 at 16:43
  • @Holtorf: that was fascinating, I am now very curious if overlaying a div over an element will prevent mouseouts from overlaid elements. – ninjagecko Apr 25 '12 at 19:08
  • 1
    The problem was that I was waiting for the onmouseout from the overlaid element. But if the overlaid element did not appear in time, the mouseout was not detected. The solution was to not create the overlay element, but use css to make it look like it. – Holtorf Apr 25 '12 at 22:05
  • @Holtorf: ah, I would have the onmouseover and onmouseout events be both attached to the element the tooltip belongs to. – ninjagecko Apr 25 '12 at 22:22