JSFiddle - React, Tailwind, and code Playground
HTML
<div id = 'container'>
<div id = 'popUp'></div>
<div id = 'popUpText'>
Text
</div>
</div>
CSS
#container{
width: 500px;
height: 200px;
background: #CCC;
position: relative;
cursor: pointer;
}
#popUpText
{
display: none;
position: absolute;
bottom: 10px;
right: 20px;
}
#popUp{
display: none;
right: 20px;
position: absolute;
bottom: -32px;
right: -2px;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
JavaScript
var h = false;
$("#container").click(function(){
if (h == false){
$("#popUp").fadeIn();
$("#popUpText").fadeIn(function(){h = true;});
}
if (h == true){
$("#popUp").fadeOut();
$("#popUpText").fadeOut(function(){h=false});
}
});