.tooltip{display:inline-block;position:relative}.tooltip .tooltiptext{visibility:hidden;color:#fff;text-align:center;z-index:1;opacity:0;background-color:#555;border-radius:6px;width:max-content;padding:10px;transition:opacity .3s;position:absolute}.tooltip-top:after{content:"";border:5px solid #0000;border-top-color:#555;margin-left:-5px;position:absolute;top:100%;left:50%}.tooltip-top{margin-left:-60px;bottom:125%;left:50%}.tooltip-right:after{content:"";border:5px solid #0000;border-right-color:#555;margin-top:-5px;position:absolute;top:50%;right:100%}.tooltip-right{top:-5px;left:115%}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}