css实现tooltip文字提示

html:

<div class="query"> 
   <span class="message"> 
        鼠标hover上显示的文字是： ********
    </span> 
</div>

css:

.query {
    width: 18px;
    height: 18px;
    background: url('query-mark.png') no-repeat;
    background-size: 90%;
    position: relative;
    cursor: pointer;
    margin-left: 100px;
    margin-top: 100px;
}
.message {
    display: none;
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 6px;
    top: -75px;
    font-size: 14px;
    width: 180px;
    background: #000;
    color: #fff;
    left: -87px;
}

.message::after {
    /* content: '';
    width: 12px;
    height: 12px;
    border:1px solid #000;
    position: absolute;
    left: 88px;
    bottom: -7px;
    transform: rotateZ(45deg);
    background: #000; */
}
/* 或者 */
.message::after {
    content: '';
    position: absolute;
    left: 88px;
    top: 100%;
    border: 12px solid transparent;
    border-top: 12px solid #000;
    margin-left: -5px;
}
.query:hover .message {
    display: block;
}

最终效果：