如何使用css伪元素创建自定义工具提示

我正在阅读css-tricks and in the end我可以看到以下内容.

Using an HTML5 data attribute, then pulling that attribute in and
styling it as a pseudo element, we can create completely custom
tooltips through CSS.

问题是文章内部的链接已经死了,我不是一个很好的html / css人,能够理解如何做到这一点.有人可以帮忙吗?

JSFiddle在这里.注意:原始内容为here.

HTML

<p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>

CSS

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #c00;
    text-decoration: none;
}

.tooltip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}
https://stackoverflow.com/questions/25214632/how-can-i-create-custom-tooltips-with-css-pseudoelements

转载注明原文:如何使用css伪元素创建自定义工具提示