Table Cells with Tooltip Comment

Table Cells with Tooltip Comment

by Krishna Ananthi

HTML

<table id="MyTable">
  <caption>Cell 1,2 Has a Comment</caption>
  <thead>
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
  </thead>
  <tbody>
    <tr></tr>
      <td>Cell 1,1</td>
      <td class="CellWithComment">Cell 1,2
       <span class="arrow-up"></span><span class="CellComment">Here is a comment</span> 
      </td>
      <td>Cell 1,3</td>
    <tr>
      <td>Cell 2,1</td>
      <td>Cell 2,2</td> 
      <td class="CellWithComment">Cell 1,2     
       <span class="arrow-up"></span><span class="CellComment">Here is a comment</span> 
 </td>
    </tr>
    <tr>
      <td>Cell 2,1</td>
      <td>Cell 2,2</td> 
      <td class="CellWithComment">Cell 1,2    
       <span class="arrow-up"></span><span class="CellComment">Here is a comment</span> 
</td>
    </tr>
    <tr>
      <td>Cell 2,1</td>
      <td>Cell 2,2</td> 
      <td class="CellWithComment">Cell 1,2
       <span class="arrow-up"></span><span class="CellComment">Here is a comment</span>    </td>
    </tr>
  </tbody>
  
</table>

CSS

#MyTable{
  border-style:solid;
  border-color:black;
  border-width:2px
}

#MyTable td{
  border-style:solid;
  border-color:black;
  border-width:1px;
  padding:3px;
}

.CellWithComment{
  position:relative;
}

 
.CellComment{
  position:absolute; 
  display:none;
  z-index:100;
  border:1px;
  background-color: yellow;
  padding:3px;
  color:red; 
  top:25px; 
  left:25px;    float: left;
  clear: left;
  

}

.arrow-up { 
  position:absolute; 
  display:none;
  width: 0; 
  height: 0; 
  top:20px; 
  left:50px; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;  float: left;
  clear: left;

}


.CellWithComment:hover span.arrow-up,
.CellWithComment:hover span.CellComment {
  display:block;
}