SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wrapper">
    <p class="p1">data-tit="自定义提示的内容"</p>
    <p data-tit="自定义提示的内容">文本内容</p>
    <button class="i1" data-tit="自定义提示的内容2">一个按钮</button>
    <a class="a1" href="" data-tit="自定义提示的内容3">一个链接</a>
</div>
/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
    margin: 0;
    padding: 0;
}
body {
    font: 14px Microsoft YaHei;
}
a {
    text-decoration: none;
}
ol, ul {
    list-style: none;
}
.wrapper {
    width: 800px;
    margin: 100px auto;
}
.i1 {
    padding: 5px 10px;
    margin: 20px 0 0 40px;
}
.p1 {
    margin: 40px 0;
}
.a1 {
    color: #f33;
    margin-left: 40px;
}
[data-tit] {
    position: relative;
    display: inline-block;
}
[data-tit]::before,
[data-tit]::after {
    position: absolute;
    visibility: visible;
    opacity: 0;
    z-index: 20161024;
    pointer-events: none;
    transition: .2s;
}
[data-tit]::before {
    content: '';
    border: 5px solid transparent;
    border-top-color: rgba(0,0,0,.6);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 100%;
    left: 50%;
    margin-bottom: -5px;
}
[data-tit]::after {
    content: attr(data-tit);
    background: rgba(0,0,0,.7);
    font: 12px Microsoft YaHei;
    color: #fff;
    padding: 4px 8px;
    border-radius: 2px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
    white-space: nowrap;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
}
[data-tit]:hover::before,
[data-tit]:hover::after {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .15s;
    transition-delay: .15s;
}
[data-tit=""]::before,
[data-tit=""]::after {
    display: none !important;
}