tooltip.min.css

/* -------------------------------------------------------------------
  Light  Weight Tooltip using css-only

  @author mohammad ahshan danish

  <div class="tooltip" data-tool-tip="I am testing">TEST</div>
  <div class="tooltip" data-tool-tip-left="I am testing tooltip">TEST</div>
--------------------------------------------------------------------*/
[data-tool-tip-left]{--background-color:#4b4849;position:relative;display:inline-block;box-sizing:content-box}[data-tool-tip-left]:hover:after,[data-tool-tip-left]:hover:before{visibility:visible}[data-tool-tip-left]:after{position:absolute;content:"";border:10px solid transparent;border-left:10px solid var(--background-color);margin-bottom:10px;right:100%;transform:translateX(100%);visibility:hidden;z-index:9999}[data-tool-tip-left]:before{position:absolute;height:22px;padding:10px;padding-inline:15px;font-size:20px;content:attr(data-tool-tip-left);white-space:nowrap;background-color:var(--background-color);color:white;border-radius:8px;bottom:100%;margin-bottom:-30px;transform:translateX(-99%);visibility:hidden;z-index:9999}[data-tool-tip]{--background-color:#4b4849;position:relative;display:inline-block;box-sizing:content-box;z-index:9999}[data-tool-tip]:hover:after,[data-tool-tip]:hover:before{visibility:visible}[data-tool-tip]:before{position:absolute;content:"";border:10px solid transparent;border-bottom:10px solid var(--background-color);bottom:-100%;margin-bottom:10px;left:50%;transform:translateX(-50%);visibility:hidden;z-index:9999}[data-tool-tip]:after{position:absolute;height:22px;padding:10px;padding-inline:15px;font-size:20px;content:attr(data-tool-tip);white-space:nowrap;background-color:var(--background-color);color:white;border-radius:8px;bottom:-100%;margin-bottom:-30px;left:50%;transform:translateX(-50%);visibility:hidden;z-index:9999}