/* *
 * mixin - tooltip
 *
 * @file tooltip.less
 * @author mudio(job.mudio@gmail.com)
 */

@tip-font-size: 12px;
@tip-font-color: #fff;
@tip-bg-color: rgba(18, 26, 44, .8);

[tip] {
    position: relative;

    &:after {
        width: auto;
        opacity: 0;
        z-index: 1;
        display: block;
        padding: 0 4px;
        line-height: 18px;
        position: absolute;
        visibility: hidden;
        pointer-events: none;
        color: @tip-font-color;
        font-size: @tip-font-size;
        content: attr(tip);
        background-color: @tip-bg-color;
        top: 50%;
        left: 100%;
        white-space: pre;
        -webkit-transition: all .3s;
        transition: all .3s;
        -webkit-transform: translate(-5px, -50%);
                transform: translate(-5px, -50%);
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
    }


    &:hover {
        overflow: visible;

        &:after {
            opacity: 0.8;
            display: block;
            visibility: visible;
            -webkit-transform: translate(5px, -50%);
                    transform: translate(5px, -50%);
        }
    }

    // 上面
    &.tip-top,
    &[tip-align="top"] {
        &:after {
            top: auto;
            left: 50%;
            bottom: 100%;
            -webkit-transform: translate(-50%, 5px);
                    transform: translate(-50%, 5px);
        }
        &:hover {
            &:after {
                -webkit-transform: translate(-50%, -5px);
                        transform: translate(-50%, -5px);
            }
        }
    }

    // 下面
    &.tip-bottom,
    &[tip-align="bottom"] {
        &:after {
            top: 100%;
            left: 50%;
            bottom: auto;
            -webkit-transform: translate(-50%, -5px);
                    transform: translate(-50%, -5px);
        }
        &:hover {
            &:after {
                -webkit-transform: translate(-50%, 5px);
                        transform: translate(-50%, 5px);
            }
        }
    }

    // 左面
    &.tip-left,
    &[tip-align="left"]  {
        &:after {
            top: 50%;
            right: 100%;
            left: auto;
            bottom: auto;
            -webkit-transform: translate(5px, -50%);
                    transform: translate(5px, -50%);
        }
        &:hover {
            &:after {
                -webkit-transform: translate(-5px, -50%);
                        transform: translate(-5px, -50%);
            }
        }
    }

    &.tip-disable:after {
        visibility: hidden !important;
    }
}

[tip=""]:after {
    visibility: hidden !important;
}
