JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle">
<div class="popup">
    <div class="square"> </div>
    <div class="corner"></div>
</div>
    

</div>

CSS

.square{
    width : 100px;
    height: 100px;
    background-color : green;
}
.corner{
    width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 20px solid green;
    position : relative ;
    left : 30px;
}
#circle{
    border-radius : 10px;
    width : 20px;
    height : 20px;
    background-color : red;
    position : relative;
    left : 50px;
    top : 200px;
}
.popup{
    display : none;
    position : absolute;
    top : -120px;
    left : -33px;
    transition: all 0.5s ease-in;
    opacity: 0;
    
}
#circle:hover .popup{
    display : block;
    opacity: 1;
}