/**
使用data-tip来实现title的效果
*/

/* 通过属性选择器获取到标签，加上相对定位 */
[data-tip] {
    position: relative;
    /* display: inline-block; */
}

/* // 统一设置伪类的样式 */
[data-tip]::before,
[data-tip]::after {
    position: absolute;
    visibility: visible;
    opacity: 0;
    z-index: 20230610;
    pointer-events: none;
    /* 点击穿透 */
    transition: .2s;
}

/* // 单独设置before， 设置小三角形 */
[data-tip]::before {
    content: '';
    /* // 通过border来设置三角形 */
    border: 10px solid transparent;
    /* // 通过这个来设置三角形的直角的方向 */
    /* border-bottom-color: rgba(0, 0, 0, .6); */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    top: 88%;
    left: 50%;
    margin-bottom: -5px;
    background: none !important;
}

/* // 设置字体和背景 */
[data-tip]::after {
    /* // 通过 attr来或者字体 */
    content: attr(data-tip);
    background: rgba(0, 0, 0, .9);
    font: 14px Microsoft YaHei;
    color: #fff;
    padding: 4px 8px;
    border-radius: 2px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
    /* top: 100%; */
    top: 121%;
    white-space: nowrap;
    /* width: 100%;
    // 保留空格 弹框和元素一样宽
    white-space: pre-wrap; 
    */
    left: 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    margin-bottom: 5px;
}

/* // hover的时候显示 */
[data-tip]:hover::before,
[data-tip]:hover::after {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .15s;
    transition-delay: .15s;
}
[data-tip]:hover::before{
    border-bottom-color: rgba(0, 0, 0, .9);
}

/* 当data-tip 没有内容的时候隐藏 */
[data-tip=""]::before,
[data-tip=""]::after {
    display: none !important;
}
[data-tip=""]::before{
    background: none !important;
}