JS - Scroll a hover-related div

Question

I\'ve a couple div that allow you to hover over #HoverMe in order to see contents in #hidden div(that\'s hidden when un-hovered). If the list is a bit

Answer 1

You can schedule the hiding action instead of instantly hiding your popover on mouseout of your trigger or popover elements using setTimeout and cancel it when you hover on your trigger or popover again.

window.onload = function () {
  var triggerEl = document.querySelector('.trigger');
  var popoverEl = document.querySelector('.popover');
  
  var hideTimer = null;
  
  triggerEl.addEventListener('mouseover', function () {
    showPopover();
  }, false);

  triggerEl.addEventListener('mouseout', function () {
    scheduleHidingPopover();
  }, false);
  
  popoverEl.addEventListener('mouseover', function () {
    cancelHidingPopover();
  }, false);
  
  popoverEl.addEventListener('mouseout', function () {
    scheduleHidingPopover();
  }, false);

  function showPopover() {
    cancelHidingPopover();
    popoverEl.classList.remove("hidden");
  }
  
  function hidePopover() {
    cancelHidingPopover();
    popoverEl.classList.add("hidden");
  }

  function scheduleHidingPopover() {
    cancelHidingPopover();
    hideTimer = setTimeout(function () {
      hidePopover();
      hideTimer = null;
    }, 1000);
  }
  
  function cancelHidingPopover() {
    if (hideTimer) {
      clearTimeout(hideTimer);
      hideTimer = null;
    }
  }

};

.trigger {
  display: inline-block;
  vertical-align: top;
  background-color: #eef;
}
.popover {
  display: inline-block;
  vertical-align: top;
  background-color: #fee;
  max-height: 100px;
  overflow: auto;
}
.hidden {
  display: none !important;
}

Hover over me

  I will pop over.

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

The jQuery version:

$(function () {
  var $triggerEl = $('.trigger');
  var $popoverEl = $('.popover');
  
  var hideTimer = null;
  
  $triggerEl.on('mouseover', function () {
    showPopover();
  });

  $triggerEl.on('mouseout', function () {
    scheduleHidingPopover();
  });
  
  $popoverEl.on('mouseover', function () {
    cancelHidingPopover();
  });
  
  $popoverEl.on('mouseout', function () {
    scheduleHidingPopover();
  });

  function showPopover() {
    cancelHidingPopover();
    $popoverEl.removeClass("hidden");
  }
  
  function hidePopover() {
    cancelHidingPopover();
    $popoverEl.addClass("hidden");
  }

  function scheduleHidingPopover() {
    cancelHidingPopover();
    hideTimer = setTimeout(function () {
      hidePopover();
      hideTimer = null;
    }, 1000);
  }
  
  function cancelHidingPopover() {
    if (hideTimer) {
      clearTimeout(hideTimer);
      hideTimer = null;
    }
  }

});

.trigger {
  display: inline-block;
  vertical-align: top;
  background-color: #eef;
}
.popover {
  display: inline-block;
  vertical-align: top;
  background-color: #fee;
  max-height: 100px;
  overflow: auto;
}
.hidden {
  display: none !important;
}

Hover over me

  I will pop over.

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

  Lorem ipsum

Note that not so many things changed. The variables were prefixed with $ sign just to clear that they are not DOM elements anymore (as in Vanilla JS example) but jQuery wrappers. The power of jQuery is brevity, convinience (you can do more things with JQuery wrappers than with DOM elements) and smoothing browser incompatabilities (this factor is less important now, than 10 years ago when jQuery rised).