Mouseover pop-up

by Kevin Bratt

HTML

<span class="NameHighlights">
    <a href="product link is here">Product 1</a>
    <div>
        # of Votes:  123<br>
        % Liked<br>
        <a href="product review link">See User reviews</a>
    </div>
</span>
----------
<span class="NameHighlights">
    <a href="product link is here">Product 2</a>
    <div>
        # of Votes:  321<br>
        % Liked<br>
        <a href="product review link">See User reviews</a>
    </div>
</span>

CSS

.NameHighlights .NameHighlightsHover {
  position: relative;
}

.NameHighlights div {
  display: none;
}

.NameHighlightsHover div {
  display: block;
  position: relative;
  background-color: #DDD;
  *top:20px;
      width: 15em;
    top:1.3em;

    left:70px;
    z-index:1000;
    
    padding: 5px;
    border-radius: 4px;*/
}

JavaScript

var span = document.querySelectorAll('.NameHighlights');
for (var i = span.length; i--;) {
  (function() {
    var t;
    span[i].onmouseover = function() {
      hideAll();
      clearTimeout(t);
      this.className = 'NameHighlightsHover';
    };
    span[i].onmouseout = function() {
      var self = this;
      t = setTimeout(function() {
        self.className = 'NameHighlights';
      }, 300);
    };
  })();
}

function hideAll() {
  for (var i = span.length; i--;) {
    span[i].className = 'NameHighlights';
  }
};