.tooltip {
    visibility: hidden;
    z-index: 1;
    opacity: .40;
    
    width: 200%;
    padding: 5px 20px;
  
    background: #333;
    color: #fff;
    
    position: absolute;
    border-radius: 9px;
    font: 16px;
  
    transform: translateY(9px);
    transition: all 0.3s ease-in-out;
    
    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);

    top:-20%; left:-170%;
    
  }
  
  
  .tooltip::after {
    content: " ";
    width: 0;
    height: 0;
    
    border-style: solid;
    border-width: 10px 10.5px 0 10.5px;
    border-color: #333 transparent transparent transparent;
  
    position: absolute;

    top:3vh;
    left:95%;
    transform: rotate(-90deg);
  
  }
  
  td:hover .tooltip{
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
      transition: .3s linear;
  
  }

  .tooltip p {
    margin: 0;
  }