On clicking on a link I show a pop up. Here is my pop up code

<div class='' id="custom-popover">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover left</h3>
    <div class="popover-content" id="details-container">
    </div>
  </div>
</div>

I also add some html code using jquery when pop up show. Now I want to check if cursor is on this pop over or if user is hovering over this pop up and then I show an alert message otherwise hide the popup. How can I do this? I tried something like this

var isHovered = $('#custom-popover').is(":hover");
if (isHovered){
alert("msg"); 
} else {
 $('#custom-popover').hide();
 }

But this is not working. How can I do this?

On clicking on a link I show a pop up. Here is my pop up code

<div class='' id="custom-popover">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover left</h3>
    <div class="popover-content" id="details-container">
    </div>
  </div>
</div>

I also add some html code using jquery when pop up show. Now I want to check if cursor is on this pop over or if user is hovering over this pop up and then I show an alert message otherwise hide the popup. How can I do this? I tried something like this

var isHovered = $('#custom-popover').is(":hover");
if (isHovered){
alert("msg"); 
} else {
 $('#custom-popover').hide();
 }

But this is not working. How can I do this?

• javascript
• jquery

Share Improve this question Follow asked Mar 13, 2014 at 4:47 asdfkjasdfjkasdfkjasdfjk 3,9041818 gold badges6666 silver badges107107 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

use global variable:

var cursorOnDiv = false;

$(document).on({
        mouseenter:function(){ cursorOnDiv = true; },
        mouseleave:function(){ cursorOnDiv = false; },
    }, 
   '#yourDivId'
);

and check him

Try it:

$("#custom-popover").hover(
   function() {
       $("#custom-popover").show();
   },
   function() {
       $("#custom-popover").hide();
});

Some thing like this,

$( "#custom-popover" ).mouseover(function() {
     $('#custom-popover').hide();
});

the function is() as per doc is often useful inside callbacks, such as event handlers. This function runs only once as it is not a callback. So in order to detect hover events use call backs.

You can have even like this if you want to have enter and leave both,

$( "custom-popover" )
.mouseenter(function() {

})
.mouseleave(function() {

})

This is what you ask:

$("#custom-popover").hover(
   function() {
       alert("Hovering now");
       $("#custom-popover").show();
   },
   function() {
       $("#custom-popover").hide();
});

You stored a value whether #custom-popover is being hovered or not at the time of execution, you did not bind an eventListener (hover) for the cause.

Try this:

if($('#custom-popover:hover'))
{
       alert("msg");
}
else 
{
      $('#custom-popover').hide();
}