JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<table>
  <tbody>
      <tr>
        <td data-total-users="5" data-total-courses="5" data-courses-completed="15" data-incomplete-courses="10">&check;</td>
      </tr>
  </tbody>
</table>

CSS

td{
  position: relative;
}

td:after{
  content: 'TOTAL USERS: ' attr(data-total-users) ' \A TOTAL COURSES: ' attr(data-total-courses) ' \A COURSES COMPLETE: ' attr(data-courses-complete) ' \A COURSES INCOMPLETE: ' attr(data-courses-incomplete);
   white-space: pre;
   background-color: #ccc;
   color: #333;
   font-size: 11px;
   display: block;
   font-family: helvetica;
   padding: 10px;
   position: absolute;
   pointer-events: none;
   opacity: 0;
   transition: all 0.3s;
   top: 30px;
}
td:hover:after{
  opacity: 1;
}
td:before{
  content: "";
  width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 10px 10px 10px;
   border-color: transparent transparent #CCCCCC transparent;
   transform: rotate(0deg);
    position: absolute;
   pointer-events: none;
   opacity: 0;
   transition: all 0.3s;
   top: 20px;
}
td:hover:before{
  opacity: 1;
}