css伪类实现tip效果

https://hwlv.github.io/fullpage/test/after.html  原作者的demo

.tip::after {
        content: attr(data-tip);
        display: none;
        position: absolute;
        padding: 5px 10px;
        left: 15%;
        bottom: 100%;
        width: 150px;
        margin-bottom: 12px;
        transform: translateX(-50%);
        font-size: 12px;
        background: #000;
        color: #fff;
        cursor: default;
    }
    .tip::before {
        content: " ";
        position: absolute;
        display: none;
        left: 15%;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: 3px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 9px solid #000;
    }
    .tip:hover::after,
    .tip:hover::before {
        display: block;
    }

  <div class="tip" data-tip="与成交数据是否一致">一致性</div>

实现效果