JSFiddle - React, Tailwind, and code Playground

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:  123<br>
        % Liked<br>
        <a href="product review link">See User reviews</a>
    </div>
</span>

CSS

.NameHighlights {
    position:relative;
}
.NameHighlights div {
    display: none;
}
.NameHighlightsHover {
    position:relative;
}
.NameHighlightsHover div {
    display:block;
    position:absolute;
    width: 15em;
    top:1.3em;
    *top:20px;
    left:70px;
    z-index:1000;
    background-color: #DDD;
    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'; 
    }
};