JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<span class="mumm"><span>Some info here...</span></span>

CSS

body {background:#ccc;}
.mumm {position:absolute;top:200px;left:200px;width:25px;height:25px;background:red;border-radius:25px;overflow:hidden;}
.mumm > span {position:absolute;bottom:100%;right:-10px;width:100px;border:solid 2px red;border-radius:5px;padding:10px;margin-bottom:10px;background:#fff;opacity:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mumm > span:before {content:'';position:absolute;top:100%;right:12px;border:solid 10px transparent;border-top-color:red;}
.mumm:hover {overflow:visible;}
.mumm:hover > span {opacity:1;}