JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<p>In facilisis velit vel erat vestibulum adipiscing. Donec at purus mi. Aliquam ut adipiscing magna. Vestibulum et libero nec est tempus ultrices nec a turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget quam tincidunt, convallis velit a, ullamcorper enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales leo nec tincidunt scelerisque. Donec vel porta lacus. Mauris elementum eros est, eget malesuada urna dapibus id. Nam viverra, massa consectetur feugiat scelerisque, libero urna posuere lorem, et consequat diam mauris vel nulla. Nam aliquet a tellus consequat semper. Nam porttitor massa sed cursus fringilla. Vivamus gravida convallis ultricies.</p>
<div class="div-1">
    <p>In facilisis velit vel erat vestibulum adipiscing. Donec at purus mi. Aliquam ut adipiscing magna. Vestibulum et libero nec est tempus ultrices nec a turpis. In dignissim ipsum eget lorem consequat ultricies. Cras sollicitudin at massa in porttitor.</p>
</div>
<div class="div-1">
    <div class="show-span">Hello
        <div class="popup-panel">
            <p>Donec lacinia orci nec tristique sagittis. Donec erat risus, tristique ut pharetra nec, ornare sit amet mauris. Morbi tristique ligula a quam placerat, vel auctor tortor sagittis. Vivamus in congue ante. Aliquam in venenatis urna. In nec pharetra ipsum, eget volutpat odio. Nam tincidunt dui ut velit egestas dignissim. Ut eget tortor erat.</p>
            <p>Donec lacinia orci nec tristique sagittis. Donec erat risus, tristique ut pharetra nec, ornare sit amet mauris. Morbi tristique ligula a quam placerat, vel auctor tortor sagittis. Vivamus in congue ante. Aliquam in venenatis urna. In nec pharetra ipsum, eget volutpat odio. Nam tincidunt dui ut velit egestas dignissim. Ut eget tortor erat.</p>
            <p>Donec lacinia orci nec tristique sagittis. Donec erat risus, tristique ut pharetra nec, ornare sit amet mauris. Morbi tristique ligula a quam placerat, vel auctor tortor...

CSS

html, body {
    padding:0;
    margin:0;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: Segoe UI, Sans-serif;
}
.div-1 {
    float:left;
    width:50%;
}
.clearfix:before, .clearfix:after {
    display: table;
    content:" ";
}
.clearfix:after {
    clear: both;
}
.relative {
    position:relative;
}
.show-span {
    display:inline-block;
    width:100px;
}
.popup-panel {
    background:yellow;
    padding:5px;
    position:absolute;
    z-index:100;
    display:none;
}

JavaScript

function myPopup() {
var wh = $(window).height();
var leftoffset = $('.show-span').offset().left;
var topoffset = $('.show-span').offset().top - 10;
var pnlheight = $('.popup-panel').height();
$('.popup-panel').css({
    right: leftoffset
});
if (wh >= pnlheight) {
    $('.popup-panel').css({
        top: topoffset / 2
    });
} else {
    $('.popup-panel').css({
        top: 0,
        'overflow-y': 'scroll',
        height: $(window).height()
    });
}
var timeout;
$(".show-span").hover(function () {
    clearTimeout(timeout);
    $(".popup-panel").delay(500).fadeIn('fast');
}, function () {
    timeout = setTimeout(function () {
        $(".popup-panel").delay(500).fadeOut('fadeOut');
    }, 500);
});
}
$(document).ready(function() {
    myPopup();
});
$(window).scroll(function() {
    myPopup();
});
$(window).resize(function() {
    myPopup();
});