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>
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;
}