/* ===============================
   Core
================================ */
.tooltip-box{
    position:absolute;
    z-index:99999;
    background:#333;
    color:#fff;
    padding:8px 12px;
    border-radius:6px;
    font-size:14px;
    line-height:1.5;
    max-width:260px;
    box-sizing:border-box;
    white-space:normal;
    opacity:0;
    pointer-events:none;
    transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease;
}

/* 显示状态 */
.tooltip-show{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

/* ===============================
   Arrow Base
================================ */
.tooltip-box:before{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-style:solid;
}

/* ===============================
   Positions
================================ */

/* Top */
.tooltip-top:before{
    bottom:-6px;
    left:50%;
    transform:translateX(-50%);
    border-width:6px 6px 0 6px;
    border-color:#333 transparent transparent transparent;
}

/* Bottom */
.tooltip-bottom:before{
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    border-width:0 6px 6px 6px;
    border-color:transparent transparent #333 transparent;
}

/* Left */
.tooltip-left:before{
    right:-6px;
    top:50%;
    transform:translateY(-50%);
    border-width:6px 0 6px 6px;
    border-color:transparent transparent transparent #333;
}

/* Right */
.tooltip-right:before{
    left:-6px;
    top:50%;
    transform:translateY(-50%);
    border-width:6px 6px 6px 0;
    border-color:transparent #333 transparent transparent;
}

/* ===============================
   Optional: Light Theme
================================ */
.tooltip-light{
    background:#fff;
    color:#333;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.tooltip-light.tooltip-top:before{border-color:#fff transparent transparent transparent}
.tooltip-light.tooltip-bottom:before{border-color:transparent transparent #fff transparent}
.tooltip-light.tooltip-left:before{border-color:transparent transparent transparent #fff}
.tooltip-light.tooltip-right:before{border-color:transparent #fff transparent transparent}