JSFiddle - React, Tailwind, and code Playground

by MyNameIsCode

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
    padding:10px;
}

div {
    width:60px; height:60px;
    margin:10px;
    background:rgba(255,128,128,0.5);
    float:left;
}

aside {
    width:300px;
    height:200px;
    background:rgba(128,128,255,0.5);
}

JavaScript

// 
//  don't forget to load jQuery UI Position.

(function ($) {
    
    var _popup = $('<aside>'),
        _repo = [];
    
    $(function () {
        
        $('div').on('mouseenter', function (e) {            
                        
            var _pu = _popup.clone().css({opacity:0.01}).appendTo(this),
                _this = $(this),
                _window = $(window)
                ;
            
            // get distance of image to screen right edge
            var _d = _window.innerWidth() - (_this.offset().left + _this.outerWidth());                        
            
            // get width of popup
            var _w = _pu.outerWidth();

            
            _repo.push(_pu.position({
                my : (_d - _w) > 0 ? 'left top' : 'right top',
                at : (_d - _w) > 0 ? 'right top' : 'left top',
                of : _this,
                collision: 'flipfit'
            }).css({opacity:1}));
                        
        }).on('mouseleave', function (e) {
            $.each(_repo, function (i,v) { v.remove(); });
        })            
        ;                
        
    });
    
})(jQuery);