JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<div class="hasTooltip milestone showCursor">
   <div class="status-dot-green">
   </div>
   <span style="top:89.5px;left:1098.421875px;">Status: Complete<br>Date: 06/02/2020<br>Time: 09:32:11 AM<br></span>
         <br>
      <div class="submilestone" style="visibility: visible;">
         <br>
         <div class="status-dot-green submile-margin">
            <div class="subStatus">Received Airing Data ESP</div>
         </div>
         <br>
         <div class="status-dot-green submile-margin">
            <div class="subStatus">Encode Request Sent </div>
         </div>
         <br>
         <div class="status-dot-red submile-margin">
            <div class="subStatus">Sent Mezz (CAM)</div>
         </div>
      </div>
</div>

CSS

.hasTooltip span {
    display: none;
}

.hasTooltip:hover span { 
    display: block;
    position: fixed;
    border-radius: 4px;
    color: #445A6F;
    padding: 5px 5px;
    width: fit-content;
    max-width: 20%;
    white-space: pre-wrap;
    font-size: 10px;
    line-height: 14px;
    background: #D0D9E2;
}

.hasTooltip span:after{
    content: " ";
    position: absolute;
    bottom: 100%;
    bottom: -23px;
    transform: translateX(-50%) ;
    left:50%;
    border-width: 6px;
    border-style: solid;
    border-color: #D0D9E2  transparent transparent transparent;
  }  
.hasTooltip{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.milestone {
    text-align: center;
}
.showCursor{
    cursor: pointer;
}
.status-dot-green {
    height: 18px;
    width: 18px;
    background-color: #A4CF72;
    border-radius: 50%;
    display: inline-block;
}
.status-dot-red {
    height: 18px;
    width: 18px;
    background-color: #C5203E;
    border-radius: 50%;
    display: inline-block;
}
.status-dot-yellow {
    height: 18px;
    width: 18px;
    background-color: #FFDC62;
    border-radius: 50%;
    display: inline-block;
}
.status-dot-empty {
    height: 18px;
    width: 18px;
    border: 1px solid #D3D3D3;
    border-radius: 50%;
   display: inline-block;
}
.submilestone{
    position: fixed;  
    visibility: hidden;
    z-index: 10;
}
.submile-margin{
    margin-top : 30%
}
.subStatus{
    margin-left: 23px;
}