.x-tooltip {
    position: relative;
    .top{
        cursor: pointer;
        &:hover{
            & + .box{
                opacity:1;
            }
        }
    }
    .box{
        position: absolute;
        display: inline-flex; 
        width: max-content; 
        background-color: rgba($color: #000000, $alpha: 0.647);
        color: #ffffff;
        padding: 0.08rem 0.2rem;
        border-radius: 4px;
        max-width: 2rem;
        word-break: break-word;
        z-index: 1;
        line-height: 0.14rem;
        opacity: 0;
        transition: opacity 1s;
    }

    .box-top{
        bottom: calc(100% + 6px);
        transform: translate(-50%,0);
        margin-left:-50%;
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-left:3px solid transparent;
            border-right:3px solid transparent;
            border-top:6px solid rgba($color: #000000, $alpha: 0.647);
            top:100%;
            left:calc(50% - 3px);  
        }
    }
    .box-right{
        transform: translate(0,-50%);
        top:50%;
        margin-left:6px;
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-top:3px solid transparent;
            border-bottom:3px solid transparent;
            border-right:6px solid rgba($color: #000000, $alpha: 0.647);
            top:calc(50% - 3px);
            left:-6px;  
        }
    }
    .box-bottom{
        top: calc(100% + 6px);
        transform: translate(-50%,0);
        margin-left:-50%;
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-left:3px solid transparent;
            border-right:3px solid transparent;
            border-bottom:6px solid rgba($color: #000000, $alpha: 0.647);
            top:-6px;
            left:calc(50% - 3px);  
        }
    }
    .box-left{
        transform: translate(-100%,-50%);
        top:50%;
        margin-left:calc(-100% - 6px);
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-top:3px solid transparent;
            border-bottom:3px solid transparent;
            border-left:6px solid rgba($color: #000000, $alpha: 0.647);
            left:100%;
            top:calc(50% - 3px);  
        }
    }
}

.x-tooltip-i18n {
    position: relative;
    .top{
        cursor: pointer;
        &:hover{
            & + .box{
                opacity:1;
            }
        }
    }
    .box{
        position: absolute;
        display: inline-flex; 
        width: max-content; 
        background-color: rgba($color: #000000, $alpha: 0.647);
        color: #ffffff;
        padding: 0.08rem 0.2rem;
        border-radius: 4px;
        max-width: 2rem;
        word-break: break-word;
        z-index: 1;
        line-height: 0.14rem;
        opacity: 0;
        transition: opacity 1s;
    }

    .box-top{
        bottom: calc(100% + 6px);
        transform: translate(50%,0);
        margin-right:-50%;
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-left:3px solid transparent;
            border-right:3px solid transparent;
            border-top:6px solid rgba($color: #000000, $alpha: 0.647);
            top:100%;
            right:calc(50% - 3px);  
        }
    }
    .box-right{
        transform: translate(0,-50%);
        top:50%;
        margin-right:6px;
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-top:3px solid transparent;
            border-bottom:3px solid transparent;
            border-left:6px solid rgba($color: #000000, $alpha: 0.647);
            top:calc(50% - 3px);
            right:-6px;  
        }
    }
    .box-bottom{
        top: calc(100% + 6px);
        transform: translate(50%,0);
        margin-right:-50%;
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-left:3px solid transparent;
            border-right:3px solid transparent;
            border-bottom:6px solid rgba($color: #000000, $alpha: 0.647);
            top:-6px;
            right:calc(50% - 3px);  
        }
    }
    .box-left{
        transform: translate(100%,-50%);
        top:50%;
        margin-right:calc(-100% - 6px);
        &::before{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-top:3px solid transparent;
            border-bottom:3px solid transparent;
            border-right:6px solid rgba($color: #000000, $alpha: 0.647);
            right:100%;
            top:calc(50% - 3px);  
        }
    }
}