check if mouse is over on popup

Question

i've made a popup box which popups after hovering mouse over it. and popup will hide at mouseleave event. but in this way the popup will hide if mousehovered in the popup box, i want to keep it not hidden even mouse is in popupbox as well as the link any code for it ? my current code is ,

$('.btnfile').live("mousemove", function() {  

$("div#popup").show();
$("div#popup").css('top', $(this).position().top).css('left',$(this).position().left);

}).live("mouseleave", function(e) {
// here the code for check if mouse is still hovered in the box, if hovered 
//on the box, skip the function otherwise hide the box

$("div#popup").hide();

});

ShadowScripter · Accepted Answer · 2012-04-15T12:26:34.110

Explanation

The .live() function, that is deprecated as of JQuery 1.7 and should be replaced with the .on() function, is used on elements that are added after the page has loaded. e.g elements the script created afterwards.

In order for the popupbox to remain visible while the user hovers the popupbox itself, it needs to be tied with the element it's currently hovering. The popup also has to be "inside" the element it's hovering, because if the user mouseleave()s the "file" button, it will trigger that event, and there is no way around that.

How it needs to look

Unless you want to try a timer method, this is how it'd look. (ish)

Mouseleave timer

Solution

Here's an example of how it can be done.
And here's my solution:

$('.btnfile').mouseenter(function(){
    $(this).prepend($("#popup"));
    $("#popup").show();
}).mouseleave(function(){
    $("#popup").hide();
});

Basically, I'm just prepending the popup div to the current btnfile its hovering, and then showing it. The rest is in the CSS.

Alternative solution

You could add a timer event, checking if the user left the button, and then they have "x" amount of time to hover over the popup, before the popup is being hidden.

Here's an example with the timer added.

var thisTimer = null;
var timeoutTime = 1000; //1 second
var insidePopup = false;

$("#popup").mouseenter(function(){insidePopup = true;})
               .mouseleave(function(){
                   insidePopup = false;
                   $(this).hide();
                });

//lots of clearTimeouts, but it is possible
$('.btnfile').mouseenter(function(){
    $(this).prepend($("#popup"));
    $("#popup", this).show();

    clearTimeout(thisTimer);
}).mouseleave(function(){
    clearTimeout(thisTimer);
    thisTimer = setTimeout(function(){
        if(!insidePopup)
            $("#popup").hide();
        clearTimeout(thisTimer);
    }, timeoutTime);
});

@BhaveshGangani No problem. I updated the post with an alternative solution involving timers. It might suit your needs better. Happy coding! :) — ShadowScripter, Dec 30 '11 at 15:13
@ShadowScripter: Actually `.live()` is deprecated since jQuery ~1.4.2, I believe, in favour of `.delegate()`. Since jQuery 1.7 they are both deprecated in favour of `.on()`. Interesting answer, however! :) +1 — Tadeck, Jun 14 '12 at 14:49
@Tadeck According to [the docs](http://api.jquery.com/live/): `As of jQuery 1.7, the .live() method is deprecated. Use .on()...` It was however _added_ to jQuery as of 1.3. If you like, I can update the post to be more precise. :P — ShadowScripter, Jun 14 '12 at 15:42
@ShadowScripter: It is not necessary, it is your answer, not mine ;) But indeed before jQuery 1.7 `.live()` was deprecated already in favour of `.delegate()`, because the latter is able to do the same and more, but in a more efficient way. `.live()` had a number of issues, for example it by default listened on the `document` level (with undocumented ability to change that level) and used only selector from the jQuery object it was executed on (eg. "`.div1,.div2`" from "`jQuery('.div1,.div2').live(...)`"), so there was overhead of executing this selector and inability to chain filters. — Tadeck, Jun 14 '12 at 16:10

score 0 · Answer 2 · edited May 18 '14 at 18:27

I know this is old...but this snippet will help someone.

$('#btnfile').hover(function (e) {
    $("#popup").dialog("option", {
        position: [e.pageX - 5, e.pageY - 5]
    });
    $(".ui-dialog-titlebar").hide();
    $("#popup").dialog("open");
}, function (e) {

    $("#popup").bind('mouseleave', function () {
        $("#popup").dialog('close');
    });
});

$("#popup").dialog({ //create dialog, but keep it closed
    autoOpen: false,
    width: 'auto',
    height: 'auto'
});

here is a fiddle: http://jsfiddle.net/9LHL6/

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

Use mouseover and mouseout functions of jquery.... like the following example..

$("#container").mouseover(function() {
   $("#hello").css('visibility', 'visible');
});

$("#container").mouseout(function() {
  $("#hello").css('visibility', 'hidden');
});

edited May 23 '17 at 12:27

Community

1
1

answered Dec 30 '11 at 12:10

ime.devdesks

394
3
4
13

this is nice. but there will be multiple links and the popup box is made universal (only one in document) for all the links, after hovering the link popup will work for the particular link. – Bhavesh G Dec 30 '11 at 12:19
so identify that link by ...(#container a) or $(this) for particular link show the pop box. – ime.devdesks Dec 30 '11 at 12:23

check if mouse is over on popup

3 Answers3

Explanation

Solution

Alternative solution