纯 CSS 做个提示框

19天前298

照例划个水哈,其实之前也写过类似的功能几行 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 就做好啦~

CSS分享18 

纯 CSS 做个提示框 - Jdeal | Life is like a Design.