如何使用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,.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,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}