.tooltip { position: relative; }

.tooltip__content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    margin-bottom: 0;
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-box);
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
}

.tooltip:hover .tooltip__content {
    bottom: 100%;
    margin-bottom: 1rem;
    opacity: 1;
}

@media ( max-width: 1099px ) {
    .tooltip.on-right .tooltip__content {
        left: auto;
        right: 0;
        transform: translateX(0);
    }
}