Question

I am working with a web application where we need to show modal style content when a user mouses over a specific portion of the page, as they move their mouse away from that area though we want to close the modal content.

I’m currently working with SimpleModal and have it working to show, but you must click to close. Does anyone know of a way to close based on mouse movement? Or similar.

Or a different component that I can use. Effectively what we are doing is showing a overly robust tooltip, that happens to be iFrame content. So if you know of a jQuery tooltip function that would support showing an iFrame that could work as well.

Answer 1

Wouldn’t be easier to use a tooltip plugin which actually features the behavior you’re looking after (show/hide a box when hovering an element) ?

I think the best is qTip.

It can show simple tooltip, load content via ajax, display advanced content (not just text), is highly styl-able and proposes a full api to work with.

---

In the meantime, I don’t know much about SimpleModal and as you don’t show any javascript, I can only guess how you actually create the modal dialog.

Anyway, jQuery proposes the .hover() method to handle the cases of entering an element with the mouse and leaving it. You use like this:

$('#myelement').hover(
    // this function is executed when entering the element with the mouse
    function(e) {
        // create you SimpleModal here
    },
    // this one when leaving
    function(e) {
        // close it here
        // from the SimpleModal doc, you close the currently opened modal with
        $.modal.close()
    }
);

DEMO