JSFiddle - React, Tailwind, and code Playground
HTML
<a class="someclass" href="#" data-popup="Some Text">click here</a>
<a class="someclass" href="#" data-popup="Some other Text">or here</a>
<div id="popup">
<div class="close"></div>
<div class="content"></div>
</div>
CSS
#popup {
position: absolute;
z-index: 999;
background: #000;
color: #fff;
display: none;
}
#popup .content {
margin: 10px;
}
#popup .close {
position: absolute;
top: -5px;
right: -5px;
width: 10px;
height: 10px;
background: #f00;
}
JavaScript
$("a.someclass").click(function(e){
e.preventDefault();
$("#popup .content").html($(this).data("popup"));
$("#popup").css({left: $(e.target).offset().left+30, top: $(e.target).offset().top+30}).show();
});
$("#popup .close").click(function(){
$("#popup").hide();
});