<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
text-align: center;
}
p {
margin: 100px;
}
.tip {
display: inline-block;
position: relative;
}
.tip:before, .tip:after {
opacity: 0;
position: absolute;
z-index: 1000;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.tip:before {
content: '';
border: 6px solid transparent;
}
.tip:after {
content: attr(data-tip);
padding: 5px;
white-space: nowrap;
background-color: #000000;
color: #ffffff;
}
.tip:hover:before, .tip:hover:after {
opacity: 1;
z-index: 1000;
}
.tip-top:before {
bottom: 100%;
left: 50%;
border-top-color: rgba(0, 0, 0, 0.8);
margin-left: -3px;
margin-bottom: -12px;
}
.tip-top:after {
bottom: 100%;
left: 50%;
margin-left: -6px;
}
.tip-top:hover:before {
margin-bottom: -6px;
}
.tip-top:hover:after {
margin-bottom: 6px;
}
.tip-bottom:before {
top: 100%;
left: 50%;
border-bottom-color: rgba(0, 0, 0, 0.8);
margin-left: -3px;
margin-top: -9px;
}
.tip-bottom:after {
top: 100%;
left: 50%;
margin-left: -6px;
margin-top: 3px;
}
.tip-bottom:hover:before {
margin-top: -3px;
}
.tip-bottom:hover:after {
margin-top: 9px;
}
.tip-right:before {
top: 50%;
left: 100%;
border-right-color: rgba(0, 0, 0, 0.8);
margin-left: -9px;
margin-top: -3px;
}
.tip-right:after {
top: 50%;
left: 100%;
margin-left: 3px;
margin-top: -6px;
}
.tip-right:hover:before {
margin-left: -3px;
}
.tip-right:hover:after {
margin-left: 9px;
}
.tip-left:before {
top: 50%;
left: 0%;
border-left-color: rgba(0, 0, 0, 0.8);
margin-left: 0px;
margin-top: -3px;
}
.tip-left:after {
top: 50%;
right: 100%;
margin-right: 0px;
margin-top: -6px;
}
.tip-left:hover:before {
margin-left: -6px;
}
.tip-left:hover:after {
margin-right: 6px;
}
style>
head>
<body>
<p>
<button class="tip tip-top" data-tip=" "> button>
p>
<p>
<button class="tip tip-bottom" data-tip=" "> button>
p>
<p>
<button class="tip tip-right" data-tip=" "> button>
p>
<p>
<button class="tip tip-left" data-tip=" "> button>
p>
body>
html>