.tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip .tooltiptext {
    visibility: hidden;
    white-space: nowrap;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0 10px; /* Горизонтальный паддинг */
    position: fixed;
    z-index: 10000;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    width: auto; /* автоматическое значение ширины */
    height: 40px; /* фиксированная высота */
    line-height: 40px; /* вертикальное центрирование текста */
    opacity: 0;
    transition: opacity 0.6s; /* увеличиваем длительность перехода */
}

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

.tooltip svg {
    margin-left: 0.5rem;
    cursor: help;
}