Tooltip
topAny Text
bottomAny Text
leftAny Text
rightAny Text
Structure
<span class="tooltip">
top
<span class="tooltip-text top">Any Text</span>
</span>
Just replace top with your direction
Style
<style>
*{box-sizing:border-box;}
.tooltip {
position:relative;
cursor:pointer;
background-color:#a1ff89;
padding:8px 16px;
text-align:center;margin:10px 10px
}
.tooltip-text{
position:absolute;
background-color:#fcddb8;
width:100px;
border-radius:2px;
padding:8px 12px;
display:none;
text-align:center;
z-index:1
}
.tooltip-text::after{
content:'';
position:absolute;
border:10px solid transparent;
}
.tooltip:hover .tooltip-text{display:block}
/*For top tooltip*/
.tooltip-text.top{bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);}
.tooltip-text.top::after{border-top-color:#fcddb8;left:calc(50% - 10px);bottom: -20px;}
/*For bottom tooltip*/
.tooltip-text.bottom{top:calc(100% + 10px);left:50%;transform:translateX(-50%);}
.tooltip-text.bottom::after{border-bottom-color:#fcddb8;left:calc(50% - 10px);top: -20px;}
/*For left tooltip*/
.tooltip-text.left{top:50%;right:calc(100% + 10px);transform:translateY(-50%);}
.tooltip-text.left::after{border-left-color:#fcddb8;bottom:calc(50% - 10px);right: -20px;}
/*For right tooltip*/
.tooltip-text.right{top:50%;left:calc(100% + 10px);transform:translateY(-50%);}
.tooltip-text.right::after{border-right-color:#fcddb8;bottom:calc(50% - 10px);left: -20px;}
</style>