.tooltiptext { visibility: hidden; 
  opacity: 0; 
  width: 220px; 
  background: #222 !important; 
  color: #fff; 
  text-align: left; 
  border-radius: 6px; 
  padding: 8px; 
  position: absolute; 
  z-index: 10000 !important; 
  left: 50%; 
  top: 110%; 
  transform: translateX(-50%); 
  transition: opacity 0.2s; 
  font-size: 13px; 
  pointer-events: none; 
}


.tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext, .tooltip:active .tooltiptext { 
  visibility: visible; 
  opacity: 1; 
  pointer-events: auto; 
}