vue-poster-editor/lib/styles/widgets/tooltips.less

A poster editor based on Vue.js

// editor-tooltips
.editor-tooltips[aria-label]{
    position: relative;



    &:before{
        display: none;
        border: 5px solid rgba(0, 0, 0, 0);
        border-bottom-color: rgba(0, 0, 0, .7);
        color: rgba(0,0,0,0.8);
        content: "";
        margin: 3px 0 0 -5px;
        height: 0;
        width: 0;
        position: absolute;
        z-index: 999;
        pointer-events: none;
        top: 100%;
        left: 50%;
    }

    &:after{
        display: none;
        background: rgba(0, 0, 0, .7);
        border-radius: 3px;
        color: #FFF;
        content: attr(aria-label);
        margin-top: 13px;
        padding: 5px 8px;
        text-align: center;
        word-wrap: break-word;
        white-space: pre;
        pointer-events: none;
        position: absolute;
        left: 50%;
        top: 100%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 1;
    }

    &.tip-top{
        &:before{
            border-bottom-color: transparent;
            border-top-color: rgba(0, 0, 0, .7);
            margin: -8px 0 0 -5px;
            top: initial;
            buttom: 100%;
            left: 50%;
        }

        &:after{
            margin-bottom: 8px;
            top: initial;
            bottom: 100%;
        }
    }

    &:hover,
    &:active{
        &:before,
        &:after{
            display: block;
            text-decoration: none;
        }
    }
    // 禁用
    &.disabled:hover,
    &.disabled:active {
        &:before,
        &:after {
            display: none;
        }
    }
}