.tooltip-button {
   cursor: pointer;
   position: relative;
}

.tooltip-button::after {
   content: "";
   display: inline-block;
   width: 20px;
   height: 20px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%230280A7' fill-opacity='.25' d='M9 5h2v2H9V5Zm0 4h2v6H9V9Zm1-9C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z'/%3E%3C/svg%3E");
   margin-left: 10px;
   top: 4px;
   position: relative;
}
.tooltip-button::before {
   content: attr(data-tooltip-text);
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   background-color: #333;
   color: #fff;
   padding: 10px 15px;
   border-radius: 3px;
   max-width: 300px;
   width: max-content;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s;
   pointer-events: none;
   z-index: 10;
}

.tooltip-button:focus::before,
.tooltip-button:hover::before {
   opacity: 1;
   visibility: visible;
}