JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<br />
<br />
<div class="test">click</div>
<div id=wrapper>
        <table width="100%">
            <thead>
                <tr>
                    <th>To</th>
                    <th>Role</th>
                    <th>Patient name</th>
                    <th>Modality</th>
                    <th>Procedure</th>
                    <th>Grade</th>
                    <th>Comments</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Rad 1</td>
                    <td class="radName">Radiologist</td>
                    <td>Mr. FirstName LastName</td>
                    <td>CT</td>
                    <td><a href="#" class="ss_sprite ss_pictures"></a>CT Head</td>
                    <td>Some comments</td>
                    <td title="Discrepancy in Interpretation/not ordinarily expected to be made (understandable miss)">Discrepancy in Interpretation/not...</td>
                    <td><span class="ss_sprite ss_accept"></span>Accepted</td>
                </tr>
                <tr>
                    <td>Rad 1</td>
                    <td>Radiologist</td>
                    <td>Abc Xyz</td>
                    <td>MR</td>
                    <td><a href="#" class="ss_sprite ss_pictures"></a>Abdomen</td>
                    <td>Some comments</td>
                    <td title="Discrepancy in Interpretation/not ordinarily expected to be made (understandable miss)">Discrepancy in Interpretation/not...</td>
                    <td><span class="ss_sprite ss_accept"></span>Accepted</td>
                </tr>
                <tr>
                    <td>Rad 1</td>
                    <td>Radiologist</td>
                    <td>Mr XyZ</td>
                    <td class="proc">CT</td>
                    <td><a href="#" class="ss_sprite ss_pictures"></a>CT Head</td>
                    <td>Some comments</td>
                    <td title="Discrepancy in Interpretation/not...

CSS

.test{
    width: 50px;
    height: 20px;
    background-color: #ddd;
    float: right;
}
.proc{background-color: #ddd;}
.popup{
    width: 250px;
    background-color: #F2F2F2;
    border: 1px solid lightGrey;
    padding: 5px;
    position: absolute;
    display: none;
}
.arrow{
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    position: absolute;
}

JavaScript

$('.test').click(function(){
    $(this).zPopUp('.popup', 'left');
    return false;
});

$('.proc').click(function(){
    $(this).zPopUp('.popup', 'left');
    return false;
});


$('.pending-grade').click(function(){
    $(this).zPopUp('.popup', 'left');
    return false;
});
$('.radName').click(function(){
    $(this).zPopUp('.popup', 'right');
    return false;
});


$('html').click(function(){
    $('.popup').hide();
});
 $('.popup').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

$.fn.zPopUp= function(element, location){
    
    var eWidth = $(element).outerWidth(true);
    var popH = $(element).outerHeight(true);
    
    var offset= $(this).offset();
    var w = $(this).outerWidth(true);
    var h = $(this).outerHeight(true);
    var position = $(this).position();
    //var L = w + pos.left;
    //var T = (pos.top - popH/2) + (h/2);
    
    switch(location){
        case 'left':
            $(element).toggle().css({
                top: position.top - h/2,
                right: w
            });
            $(element + ' span').css({
                left: eWidth - 1,
                top: h/2,
                borderColor: 'transparent transparent transparent #000'
            });
            break;
                
        case 'bottom':
            $(element).toggle().css({
                    top: position.top + h + 10,
                    left: position.left - eWidth + w
                });
            $(element + ' span').css({
                left: eWidth - w/2,
                top: 0 - 21
            });
           break;
       
           case 'right':
                 $(element).toggle().css({
                top: position.top - h/2,
                left: position.left + w - 10
            });
            $(element + ' span').css({
                left: - 21,
                top: h/2,
                borderColor: 'transparent #000 transparent transparent'
            });
           break;
     
          case...