.tooltip-container {
    &:hover .tooltiptext {
        visibility: visible;
    }

    .tooltiptext {
        &::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

        &.bottom-12::after {
            top: 100%;
        }

        &.top-14::after {
            bottom: 100%;
            transform: rotate(180deg);
        }
    }
}