JQuery flickering popup window on hover

[Greg Charles]

I have an HTML table, one column of which contains multiple lines of text on each row. I'm trying to display only the first line of the text in each row in the table, but when the user mouses over the cell, I pop up a window showing the full text. I'm doing this by populating a hidden div with the text, calling the jQuery show() method, and then calling hide() when the user mouses out of the cell. The problem is if part of the window pops up under the mouse pointer, then this is interpreted as leaving the cell, which closes the window. Then the mouse is back in the cell, so window is re-shown. The result is a flickering popup window ... on, off, on, off, etc.

The advice I've seen for this issue is to make sure the window doesn't pop up under the mouse pointer, but that's not always practical, depending on where the cell is and how big the popup window needs to be. I get the same problem whether I use mouseover and mouseout, mouseenter and mouseleave, or hover. It seems like this would be a common problem. Has anyone solved it?

[Bear Bibeault]

Dismiss the flyout (I hate the word "popup" as too ambiguous) when the mouse leaves the flyout rather than the cell.

[Greg Charles]

Thanks for the update in terminology. Half the challenge in Googling for information is just figuring out what things are called.

For this advice, I'd have to guarantee that the flyout does appear under the mouse pointer, yes? Now that I think about it, that's probably an easier problem than guaranteeing it doesn't. Ideally though, I'd like it to look like SQL Developer (unfortunately the best example I can think of at the moment), where as you move from cell to cell, the flyout content and position changes ... even if the two cells are both underneath the old flyout. I'm guessing that might involve working out boundaries myself and defining mousemovement handlers. Does that sound right?

[Bear Bibeault]

Without playing around with it, I'm thinking some structuring might help. When you create the flyout div are you creating it as a child of the cell? I'm wondering if it would still consider the cursor leaving the parent cell if the flyout is a child of the cell. (Using mouseenter and mouseleave events).

This, by the way, has nothing to do with jQuery per se, but with how the browsers handle events.

[Greg Charles]

Hmm, no I'm not. I have a div completely separate from the table and I fill it in as needed. Turning a div inside the cell into a flyout didn't even occur to me, but it might make the event handling easier at that. It also seems a bit cleaner to me. At the moment, I'm doing good with mouse movements. I save the top, left, bottom, and right of the td as I enter it, then bind a mousemove to ... well, I wanted to use body, but I didn't seem to get any events from that ... so, to a top level div that contains both the table and my flyout div. When I move outside the the td's boundaries, I hide the flyout and unbind the mousemove.

I'm finding it a bit tricky to position the flyout so it doesn't go outside the browser window. I'm letting the height and width vary by content, but those don't seem to be calculated until the flyout is shown. I don't really want to show it first and then position it, but is that the best option?

Bear Bibeault wrote:
This, by the way, has nothing to do with jQuery per se, but with how the browsers handle events.

Yeah, I'm really a server-side app guy, so many of the finer points of browser user interfaces are still a bit murky to me. I'm having fun though!

[Gregg Bolinger]

There are tons of jquery plugins that already do what you want. I'd take a look at some of those. One of my favorites has always been qTip

[Greg Charles]

I take it back about height and width not being available before show(). I'm not sure what I was doing wrong before, but they're there now.

Gregg Bolinger wrote:There are tons of jquery plugins that already do what you want. I'd take a look at some of those. One of my favorites has always been qTip

Good advice! My old manager used to say, "Good developers write good code, but great developers steal good code." I did play with the Tooltip plugin for awhile, and it couldn't do what I wanted. I just clicked through the qTip demos and I don't think it can either. I'll play around with it more tomorrow though. On the other hand, I'm very close to get it working on my own. Just some more tweaks to the positioning logic and I should have it. I might have to settle for "good" this time.

[Bear Bibeault]

Gregg Bolinger wrote:There are tons of jquery plugins that already do what you want. I'd take a look at some of those. One of my favorites has always been qTip

It's actually rather rare that there isn't already a jQuery plugin to do just about anything. You need to be careful though -- some are better than others (which is a nice way of saying that some can suck).