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 to long, it's scrollable. However, I can't scroll it while I'm hovering #HoverMe div. If I want to scroll #Hidden div, then I've to move, which result it disappearing again(obviously).

I would like to be able to hover #HoverMe and have lke 5 seconds to move to #hidden. If you hover #hidden before disappearing, it will stop the hide timer and be able to scroll and check the contents.

A possible worse alternative solution:

scroll #Hiddendiv while mouse is at #HoverMe?

How it looks like:

                      ------------     --------- _
                     |  #HoverMe   |  | #hidden |S|                           
                      ------------    | --------|R|
                                      | car.name|O|       
                                      |---------|L|
                                      | car.name|L|
                                       ---------|B|
                                      | car.name|A|
                                      |---------|R|
                                      | car.name| |
                                       ---------|_|

Code:

<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none">

        @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
            <div>@car.Name</div>
       }

    </div>
</div>


<script>
    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");

    hoverEle.addEventListener('mouseover', function () {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";

    }, false);

    hoverEle.addEventListener('mouseout', function () {
        popupEle.style.display = "none";
    }, false);
</script>

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;
}

<div class="trigger">Hover over me</div>
<div class="popover hidden">
  I will pop over.<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
</div>

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="trigger">Hover over me</div>
<div class="popover hidden">
  I will pop over.<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
</div>

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).

Answer 2

(BTW, this question is labelled as jQuery but you're actually using just vanilla JS! No problem, of course, just letting you know!)

You're on the right track, for sure. I think you could probably handle it with setting a timeout and clearing it.

<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none">

        @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
            <div>@car.Name</div>
       }

    </div>
</div>


<script>
    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");
    var timeoutId;

    function showPopup() {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";
    }

    function hidePopup() {
        popupEle.style.display = "none";
    }

    hoverEle.addEventListener('mouseover', function () {
        showPopup();
    }, false);

    hoverEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup(); 
        }, 5000);
    }, false);

    popupEle.addEventListener('mouseover', function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
        }
    }, false);

    popEle.addEventListener('mouseout', function () {
        hidePopup();
    }, false);

</script>