[data-adu-tooltip] {
    position: relative;
    z-index: 4;

    &::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        opacity: 0;
        transform: translateX(-50%);
        border-width: 4px 5px 0 5px;
        border-style: solid;
        border-color: $headerNavTooltipBg transparent transparent transparent;
        z-index: 100;
    }

    &::after {
        content: attr(data-adu-tooltip);
        position: absolute;
        left: 50%;
        opacity: 0;
        top: -6px;
        transform: translateX(-50%)   translateY(-100%);
        background: $headerNavTooltipBg;
        text-align: center;
        color: $headerNavTooltipFontColor;
        padding: 6px 2px;
        font-size: 12px;
        line-height: 14px;
        min-width: 90px;
        border-radius: 3px;
        pointer-events: none;
    }

    &:hover::after {
        opacity: 0.9;
    }

    &:hover::before {
        opacity: 0.9;
    }

    &::before {
        top: 100%;
        margin-top: 8px;
        transform: translateX(-50%) translatey(-100%) rotate(-180deg)
    }

    &::after {
        top: 100%;
        margin-top: 8px;
        transform: translateX(-50%) translateY(0%);
    }
}
 
.ad-dropdown-active[data-adu-tooltip]:hover::after, 
.ad-dropdown-active[data-adu-tooltip]:hover::before {
    opacity: 0;
}