How can I select everything except specific element?

Question

Here is my code:

$.fn.right = function() {
   return $(document).width() - (this.offset().left + this.outerWidth());
}

$(document).ready(function(){
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
          top      = self.position().top + self.outerHeight(true),
          right = self.right();
      $('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
      
      $(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);  
      
    }, 525);
  }).bind('mouseleave', function(){
    if(this.iid){
      clearTimeout(this.iid)
      $('.tag_info').remove();
    }
  });
});

    body{
      padding: 20px;
      direction: rtl;
    }

    a {
        color: #3e6d8e !important;
        background-color: #E1ECF4;
        padding: 2px 5px;
    }
    .tag_info{
      position: absolute;
      width: 130px;
      height: 100px;
      display:none;
      background-color: black;
      color: white;
      padding: 10px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a>long-length-tag</a>
    <a>tag</a>

It works as well and that pop-up will be removed when your mouse leaves the tag. Now I want to keep that pop-up when the mouse leaves the tag and goes on that pop-up. Otherwise it should be removed. How can I do that?

Answer 1

Now I want to keep that pop-up when the mouse leaves the tag and goes on that pop-up.

You could use MouseEvent.relatedTarget to check which element the mouse left to.

If you add an event listener on mouseleave, an event object the is passed into the event callback when the mouse leaves the element. In that event object is the property relateTarget which is a pointer to the element the mouse left on to. So if the mouse leaves the element on to the tag_info element, you can make the info not be hidden.

You can also wrap the event in a jquery selector to create a jquery object if you prefer like so:

$(e.relateTarget) // do something with the jquery object

Try hovering over the tag and then pointing your mouse on top of the tag_info

Hopefully that helps!

$.fn.right = function() {
  return $(document).width() - (this.offset().left + this.outerWidth());
}

$(document).ready(function() {
  $('a').bind('mouseenter', function() {
    var self = $(this);
    var iid = this.iid = setTimeout(function() {
      var tag_name = self.text(),
        top = self.position().top + self.outerHeight(true),
        right = self.right();
      $('body').append("<div class='tag_info'>Some explanations about " + tag_name + "</div>");

      var tagInfo = $(".tag_info");
      
      tagInfo.css({
        top: top + "px",
        right: right + "px"
      }).fadeIn(200);
      
      tagInfo.bind('mouseleave', function (e) {
        console.log('mouse left tag info');
        if (iid) {
          clearTimeout(iid)
          tagInfo.remove();
        }
      });

    }, 525);
  }).bind('mouseleave', function(e) {
    //this is the event callback and the event object is `e`
    if (e.relatedTarget && e.relatedTarget.classList.contains('tag_info')) {
      console.log('mouse left onto the tag_info');
    } else {
      console.log('mouse left onto something else');
      if (this.iid) {
        clearTimeout(this.iid)
        $('.tag_info').remove();
      }
    }
  });
});

body {
  padding: 20px;
  direction: rtl;
}

a {
  color: #3e6d8e !important;
  background-color: #E1ECF4;
  padding: 2px 5px;
}

.tag_info {
  position: absolute;
  width: 130px;
  height: 100px;
  display: none;
  background-color: black;
  color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>

Answer 2

You can add a condition to check if the mouse is hovering over the pop-up before removing it:

if ($('.tag_info:hover').length == 0) {....}

And you need to add an event on the pop-up itself to remove it on mouseleave

See code snippet:

$.fn.right = function() {
  return $(document).width() - (this.offset().left + this.outerWidth());
}

$(document).ready(function() {
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
        top = self.position().top + self.outerHeight(true),
        right = self.right();
        
      var pop_up = $('<div />', {
        "class": 'tag_info',
        text: "Some explanations about " + tag_name,
        mouseleave: function(e){
             $(this).remove();
        }})  
      
      $('body').append(pop_up);

      $(".tag_info").css({
        top: top + "px",
        right: right + "px"
      }).fadeIn(200);

    }, 525);
  }).bind('mouseleave', function() {
    if (this.iid) {
      clearTimeout(this.iid)
      if ($('.tag_info:hover').length == 0) {
        $('.tag_info').remove();
      }
    }
  });


});

body {
  padding: 20px;
  direction: rtl;
}

a {
  color: #3e6d8e !important;
  background-color: #E1ECF4;
  padding: 2px 5px;
}

.tag_info {
  position: absolute;
  width: 130px;
  height: 100px;
  display: none;
  background-color: black;
  color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>