CSS/Javascript Mouseover Popup box

jQuery version

HTML

<span class="NameHighlights">
    <a href="product link is here">Product 1</a>
    <div>
        # of Votes:  1234567890<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 {
   
    position:absolute;
    width: 15em;
    top:1.3em;
    *top:20px;
    left:70px;
    z-index:1000;
    background-color: #DDD;
    padding: 5px;
    border-radius: 4px;
}

JavaScript

var t;
$(function(){
            $('span.NameHighlights').mouseover(

                    function(e){
												hideAll();
                        clearTimeout(t);
                        $(this).attr('class', 'NameHighlightsHover');

                    }
            ).mouseout(

                    function(e){
                        
                        t = setTimeout(function() {
                        	//$(this).attr('class', 'NameHighlights');
                          hideAll();
                        }, 300);

                    }
            );
        });

function hideAll() {
    $('span.NameHighlightsHover').each(function(index) {
    		console.log('insde hideAll');
                $(this).attr('class', 'NameHighlights');
            })
};