JSFiddle - React, Tailwind, and code Playground

by phoenix_suresh

HTML

<div class="outer">
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
    <div class="now-trending"></div>
</div>        
<div id="popup">
</div>

CSS

.outer {
    display: block;
    width:500px;
    height:800px;
    background: #FAC;
    border:1px solid red;
}
.now-trending{
    clear:both;
    display:block;
    width:200px;
    height:50px;
    float:right;
    background:#FFF;
    margin:5px 0;
}
#popup {
    display:none;
    position:fixed;
    height:200px;
    width:200px;
    background:yellow;
    top:0;
    left:0;
}

JavaScript

$(document).ready(function(){
    $(".now-trending").mouseenter(function(){
        var offset = $(this).offset();
        $("#popup").css({"left" : (offset.left - 210)+"px" , "top" : (offset.top - $(window).scrollTop())+"px"}).html($(window).height()).show();
    }).mouseleave(function(){
        $("#popup").hide();
    });
});