JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<br />
<div id="pop">
<div class="cont">
    <div class="i">
        <div class="sbtooltip"></div>
    </div>
    <div class="p">
            <textarea></textarea>
    <input type="button" value="OK" />
    </div>
</div>   

</div>
<br />

CSS

.cel{
    background: #DDD;
    height: 50px;
    Width: 200px;
    margin-bottom: 10px;
    cursor: pointer;

}
#pop{

    background: #DDD;
    color: #fff;
    position: absolute;
    z-index: 999;
    display: none;
    margin-left: 10px;


}

#pop input, pop textarea{
    display: block;
    margin-bottom: 5px;
}

.sbtooltip {
    border-width: 12px;
    border-style: solid;
    border-color:  transparent blue transparent transparent;
    content: ""; /* Forces this pseudo-element to appear on hover */
    height: 1px; /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
    width: 1px;
    left: -25px;
    position: relative;

}

.cont{
width:400px;
 height:200px;
display: table;
background: #CCC;
}

.i{
display: table-cell;
vertical-align: middle;
}

.p{
padding: 5px;
 position: absolute;
    left: 0px;
}

JavaScript

$(document).ready(function(){

    $('.cel').click(function(){
        $(this).zFn('#pop');
    });

});

$.fn.zFn = function(pop){

    var pos = $(this).offset();
    var w = $(this).width();
    var h = $(this).height();
    var popH = $(pop).height();
    var L = w + pos.left;
    var T = (pos.top - popH/2) + (h/2);
    
        $(pop).show().css({
            top: T,
            left: L,
            
        });
    
}