照例划个水哈，其实之前也写过类似的功能几行 JS 的 title 提示效果，但是相较于今天说的这个方法，还是太过复杂。

然后正好前两天做了切换字体功能，感觉需要加个提示框啥的，不然人家也不知道这是个啥按钮，hah~

下面就用一个最简单的方法实现下，用到的是 css 伪类，如下：

.tooltip {
    position:relative;
}
.tooltip:hover::before {
    white-space:nowrap;
    line-height:18px;
    content:attr(data-msg);
    position:absolute;
    padding:0px 8px;
    display:block;
    color:#ffffff;
    background:#656565;
    border-radius:6px;
    font-size:12px;
    top:-25px;
    left:50%;
    transform:translateX(-50%);
}
.tooltip:hover::after {
    content:"";
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top:6px solid #656565;
}

使用方法：

在要使用的标签 class 中加入 tooltip，同时新增 data-msg="这是提示框内容"，即可使用。

使用效果如下：

这样最简单的一个 tip 就做好啦~