兼容ie9+
效果如圖:
image.png
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.qj_tooptip {
position: relative;
}
.qj_tooptip::after,
.qj_tooptip::before {
position: absolute;
z-index: 99;
display: inline-block;
pointer-events: none;
white-space: nowrap;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
font-size: inherit;
}
.qj_tooptip::after {
padding: 5px 10px;
content: attr(data-qjtooptip);
background: #383838;
color: #fff;
border-radius: 5px;
}
.qj_tooptip::before {
content: '';
border: 5px solid transparent;
}
.qj_tooptip[data-direction="right"]::after {
left: 110%;
left: -webkit-calc(100% + 5px);
left: -moz-calc(100% + 5px);
left: clac(100% + 5px);
}
.qj_tooptip[data-direction="right"]::before {
border-right-color: #383838;
left: -webkit-calc(100% - 5px);
left: -moz-calc(100% - 5px);
left: clac(100% - 5px);
}
.qj_tooptip[data-direction="left"]::after {
left: initial;
right: -webkit-calc(100% + 5px);
right: -moz-calc(100% + 5px);
right: clac(100% + 5px);
}
.qj_tooptip[data-direction="left"]::before {
border-left-color: #383838;
left: -5px;
}
.qj_tooptip[data-direction="right"]::before,
.qj_tooptip[data-direction="right"]::after,
.qj_tooptip[data-direction="left"]::after,
.qj_tooptip[data-direction="left"]::before {
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
-moz-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
.qj_tooptip[data-direction="top"]::after {
bottom: -webkit-calc(100% + 5px);
bottom: -moz-calc(100% + 5px);
bottom: clac(100% + 5px);
}
.qj_tooptip[data-direction="top"]::before {
border-top-color: #383838;
top: -5px;
}
.qj_tooptip[data-direction="down"]::after {
top: -webkit-calc(100% + 5px);
top: -moz-calc(100% + 5px);
top: clac(100% + 5px);
}
.qj_tooptip[data-direction="down"]::before {
border-bottom-color: #383838;
bottom: -5px;
}
.qj_tooptip[data-direction="top"]::before,
.qj_tooptip[data-direction="top"]::after,
.qj_tooptip[data-direction="down"]::after,
.qj_tooptip[data-direction="down"]::before {
left: 50%;
-webkit-transform: translate3d(-50%, 0, 0);
-moz-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
.qj_tooptip:hover::after,
.qj_tooptip:hover::before {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body style="text-align:center;">
<br/>
<button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="right">右邊</button>
<br>
<br>
<button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="left">左邊</button>
<br>
<br>
<button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="top">上邊</button>
<br>
<br>
<button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="down">下邊</button>
<span class="qj_tooptip" data-qjtooptip="提示文字" data-direction="down">sf</span>
</body>
</html>
