CODEWITHSUNDEEP
jquerymouseleavetipsy
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

jquery mouseleave: don't trigger when entering a tip

Hello my fellow developers,

I have some trouble polishing my UI.

I've made a popup panel, that opens when I hover over a button/link.

this panel should close whether I go out of that button/link or out of the panel itself. Pretty straight forward.

HERE (jsFiddle) I made a simple demonstration, and it works well as expected.

my JS code:

$('[data-tip]').tipsy({fade: true, gravity: 's'});

$('#btn').mouseenter(function(e){
  $('#panel').show();
}).mouseleave(function(e){
  var $panel = $('#panel')[0];  
  var $out_el = $(e.relatedTarget)[0];

  if($out_el != $panel){
    $('#panel').hide();
  }
});

$('#panel').mouseleave(function(e){
  var $btn = $('#btn')[0];  
  var $out_el = $(e.relatedTarget)[0];
  var $tipsy = $('.tipsy')[0];

  if($out_el != $btn && $out_el != $tipsy){
    $('#panel').hide();
  }
});

and HTML markup

<a href="#" id="btn">BUTTON</a>

<div id="panel">
  <a href="#" title="1" data-tip="test 1">Test anchor 1</a>
  <a href="#" title="2" data-tip="test 2">Test anchor 2</a>
</div>

The problems are tips. (jquery tipsy plugin to be exact). In the example I provided I put 2 links inside my popped up panel. Both have a tipsy attached. So on hover a tip is shown. All well.

The problem is that if I touch the tip, the panel closes. I DON'T WANT THAT. So I added another check on my onmouseleave event... to check if the "leave element" is tipsy...

but the problem (I guess) is that tipsy destroys before my event, so I cannot check if "leave element" is tipsy or not. (for $('.tipsy') I get empty and of course $('.tipsy')[0] is undefined.

please advise!

Upvotes: 2

Views: 653

Answers (2)

Popnoodles
Popnoodles

Reputation: 28409

Working demo

The condition of your mouseleave is making it hide. Try this instead.

$('#panel').mouseleave(function(e){
  if (e.target==this) $(this).hide();
});

Upvotes: 2

Viktor S.
Viktor S.

Reputation: 12815

See this demo: http://jsfiddle.net/hk5ka/8/ or same code with tipsy included into JS pane (for IE) http://jsfiddle.net/hk5ka/9/

And here is updated condition for mouse leave:

$('#panel').mouseleave(function(e){
  var $btn = $('#btn')[0];  
  var $out_el = $(e.relatedTarget)[0];  

  if($out_el != $btn && (!$(e.toElement).hasClass("tipsy") && $(e.toElement).closest(".tipsy").length == 0)){
    $('#panel').hide();
  }
});

Upvotes: 2

Related Questions