JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div class="bubbleInfo">
            <a href="#" class="trigger">Hello</a>

        <table class="popup">
                    <tbody><tr>
                        <th>File:</th>
                        <td>coda 1.1.zip</td>
                    </tr>
                    <tr>
                        <th>Date:</th>
                        <td>11/30/07</td>
                    </tr>
                    <tr>
                        <th>Size:</th>
                        <td>17 MB</td>
                    </tr>
                    <tr>
                        <th>Req:</th>
                        <td>Mac OS X 10.4+</td>
                    </tr>                        

                </tbody></table>
</div>

CSS

.bubbleInfo {
            position: relative;
            top: 250px;
            left: 200px;

        }
        .trigger {
            position: absolute;
        }
     
        /* Bubble pop-up */

        .popup {
            position: absolute;
            display: none;
            z-index: 50;
    width: 150px;
    height:150px;
color: #777;  
  -moz-box-shadow: inset 0 0 5px #6E9BA6;
-webkit-box-shadow: inset 0 0 5px #6E9BA6;
box-shadow: inner 0 0 5px #6E9BA6;
padding: 4px;        
            border-collapse: collapse;
        
    border:1px solid #9CBDFF;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;

        }
.popup th {
 width: 40%;   
    color: #1B9CAA;
}
.overlay {
 position: absolute;
width: 100%;
 height: 100%;
    display: none;
}

JavaScript

$(function() {
    var showPopup = function(trigger, popup) {
        var distance = 10,
            time = 100,
            hideDelay = 100,
            overlay;

        if ($('.overlay').length === 0) {
            overlay = $('<div/>').addClass('overlay').click(function() {
                $(this).hide();
                setTimeout(function() {
                    hideDelayTimer = null;
                    popup.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function() {

                        popup.css('display', 'none');
                    });

                }, hideDelay);
            });
            overlay.appendTo($('body'));
        } else {
            overlay = $('.overlay');
        }

        $(popup).css('opacity', 0);

            overlay.show();
            popup.css({
                top: -popup.height(),
                left: 30,
                display: 'block'
            }).animate({
                top: '-=' + distance + 'px',
                opacity: 1
            }, time, 'swing');
      

    };

    $('.trigger').click(function(event) {

        showPopup(this, $('.popup'));

        return false;
    });

});