.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  font-family:Calibri;
  background-color: red;
  color: #fff;
font-family:Calibri;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
 
  opacity: 0;
  transition: opacity 0.3s;
  
  /*adjust position of tooltip*/
  left: 85%;
  bottom: -10px;
  margin-left: 80px;
}


.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent red transparent transparent;
 

}




 .CellWithComment{position:relative;}

        .CellComment
        {
            visibility: hidden;
            width: auto;
			height:25px;
            position:absolute; 
            z-index:100;
            text-align: Left;
            opacity: 0.4;
            transition: opacity 2s;
            border-radius: 6px;
            background-color:#003366;
			color:#FFFFFF;
            padding:3px;
            top:-35px; 
            left:0px;
			border-color:#CCCCCC;
			border-width:4px;
			border-style:solid;
			
        }   
        .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;}