.info-tooltip {
   display: inline-block;
   margin-left: 8px;
   color: #007bff;
   cursor: pointer;
   position: relative;
}
 
.info-tooltip::before {
   content: attr(data-tooltip);
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   background-color: #333;
   color: #fff;
   padding: 5px 10px;
   border-radius: 4px;
   font-size: 12px;
   white-space: nowrap;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   z-index: 10;
}
 
.info-tooltip::after {
   content: '';
   position: absolute;
   bottom: calc(100% - 4px);
   left: 50%;
   transform: translateX(-50%);
   border-width: 5px;
   border-style: solid;
   border-color: #333 transparent transparent transparent;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   z-index: 10;
}
 
.info-tooltip:hover::before,
.info-tooltip:hover::after {
   visibility: visible;
   opacity: 1;
}