JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<div>
    <div id="pop1" class="popover" align="center">
    Your pop-over content will go in here!!!
    <a href="javascript:closePopOver('pop1');">CLOSE ME</a>
</div>

CSS

#itemToPress{width:100px; height:50px; background-color:#333;}

#itemsToShow{width:80px; height:50px; background-color:#D20000; position:relative; bottom:0px; left:10px;}

.popover {
    position: absolute;
    display: none;
    z-index: 2;
    height: 150px;
    width: 300px;
    background-color: #eaeaea;
}

JavaScript

// SHOW POP-OVER
function showPopOver(divID) {
    // SET THE DIV POSITION
    document.getElementById(divID).style.left = "200px";
    document.getElementById(divID).style.top = "100px";

    // SHOW THE DIV
    document.getElementById(divID).style.display = "block";
}

// CLOSE POP-OVER
function closePopOver(divID) {
    // HIDE THE DIV
    document.getElementById(divID).style.display = "none";
}