CODEWITHSUNDEEP
javascriptjquery
Cameron
Cameron

Reputation: 28853

Check next hovered item with jQuery

I have the following code that detects if a user is hovering over a box:

var toolTipHover = false;
$('#chartTooltip').on('mouseover', function () {
    toolTipHover = true;
}).on('mouseout', function () {
    toolTipHover = false;
});

$('.box').on('mouseover', function () {
  $('#chartTooltip').show();
}).on('mouseout', function () {
  console.log(toolTipHover);
  if (!toolTipHover) {
      $('#chartTooltip').hide();
  }
  toolTipHover = false;
});

And if they are then it shows the #chartTooltip element. (The tooltip is positioned and populated via some other means.)

However if the user hovers the tooltip itself it causes the tooltip to disappear (because they are no longer hovering the box). So I'm trying to check if the tooltip is being hovered (i.e. the next element hovered). and if so then ignore the mouseout event.

But toolTipHover is always false. I presume due to a race exception where mouseout has completed before the mouseover for the #chartTooltip can return the variable value of true.

How can I get around this?

Upvotes: 0

Views: 47

Answers (2)

Alexandr
Alexandr

Reputation: 1031

You could add #chartTooltip with .box in your function like this:

$('.box , #chartTooltip').on('mouseover', function()

here is fiddle

Upvotes: 0

Pat
Pat

Reputation: 2750

I'm going to assume #chartToolTip is outside of .box for this. Instead of a flag variable (toolTipHover), just check the mouseleave event toElement property. So for example: 

$('.box').on('mouseleave', function(e){
  if (!$(e.toElement).is('.tooltip')){
    $('.tooltip').hide();
  }
})

Here is an example: https://jsfiddle.net/qvqafyf2/

$('.tooltip').hide();

$('.box').on('mouseover', function(e){
$('.tooltip').show();
})

$('.box').on('mouseleave', function(e){
  if (!$(e.toElement).is('.tooltip')){
  	$('.tooltip').hide();
  }
})

$('.tooltip').on('mouseleave', function(e){
	if (!$(e.toElement).is('.box')){
  	$(this).hide();
  }
})
.box{
  width: 200px;
  height: 200px;
  background: red;
}

.tooltip{
  height: 50px;
  width: 50px;
  background: green;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>

 <div class="tooltip">
  hi
 </div>

Upvotes: 2

Related Questions