StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGood Javascript library for hover events to implement in-page popups/tooltips?
text
Body
copied!<p>I'm trying to find the perfect JavaScript library that will let me implement popups/tooltips within the page based on the hover of an element, taking into account all the necessary delays/paths that human-directed mouse movement entails. For the life of me, I don't know how to Google to find if this exists. I would have expected this to be common because there are so many hoverable pull-down menus out there (of course, a lot are not implemented properly).</p> <p>I'm trying jQuery.hoverIntent, but it has a bug and it doesn't support many of the requirements below.</p> <p>In my opinion the perfect library would do all the things that, for example, Google Search's instant preview does:</p> <ul> <li>when the mouse moves from a hoverable element to the resulting popup through another hoverable element, the library is smart enough to ignore the route if the mouse moves fast enough. hoverIntent does handle this by calculating the speed of motion.</li> <li>when the mouse moves from one hoverable element to another, the popup changes without delay. hoverIntent does this but it doesn't mouseout on the previous element if it was registered with a mouseout delay. So with hoverIntent, you could have 2 popups showing at the same time for a brief moment. Ideally, there would be a way to register multiple DOM elements as an exclusive set in which only one popup can be shown at any time, regardless of mouseout delay. </li> </ul> <p>Plus, ideally the library would do the following:</p> <ul> <li>there should be a configurable delay for the appearance of the first popup, independently of the speed of motion. This way, for example, if an entry can be both clicked and hovered, then the user could go to the entry, pause and intend to click, and just before the finger moves down, she wouldn't have an overlaying popup surprisingly appear on her and cause her to click on the wrong thing.</li> <li>let's say the popup is partially hidden by the edge of the window, and the mouse leaves through that overlapping edge, then the library should register that as a mouseout event. Not even Google Search's instant preview detects that.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload