先上效果图:
其实文字提示框可以看做是一个三角形和长方形的组合,当文字提示框在下方弹出时,三角形在上,长方形在下,然后给长方形的边框设置一定的弧度,从而整个文字提示框看起来就很自然啦~
然后设置为当鼠标移至按钮时气泡显示,移出按钮时气泡隐藏,这样就可以很自如的切换气泡的显示和隐藏效果啦~
源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltips悬停文字提示框效果</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="tooltip">
<div class="tooltipButton" type="button" onmouseover="showTips()" onmouseout="hideTips()">button</div>
<div class="tooltip-one"></div>
<div class="tooltip-two">文章转PDF</div>
</div>
<style>
.tooltipButton {
height: 32px;
width: 100px;
background-color: whitesmoke;
text-align: center;
align-items: center;
border: 1px solid;
border-radius: 15px;
padding-top: 10px;
font-size: 16px;
}
.tooltip {
position: fixed;
top: 100px;
left: 100px;
align-items: center;
}
.tooltip-one {
display: none;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-bottom: 6px solid black;
border-right: 3px solid transparent;
margin-left: 35px;
}
.tooltip-two {
display: none;
background-color: black;
color: white;
font-size: 13px;
width: 70px;
height: 20px;
text-align: center;
border-radius: 5px;
padding: 6px;
margin-top: 0px;
}
</style>
<script type="text/javascript">
var buttonOne = document.getElementsByClassName("tooltip-one")[0];
var buttonTwo = document.getElementsByClassName("tooltip-two")[0];
function showTips() {//显示文字提示框
buttonOne.style.setProperty('display', 'block');
buttonTwo.style.setProperty('display', 'block');
console.log("1");
}
function hideTips() {//隐藏文字提示框
buttonOne.style.setProperty('display', 'none');
buttonTwo.style.setProperty('display', 'none');
console.log("2");
}
</script>
</body>
</html>
对于文字提示框在左边显示、右边显示还有上边显示都是一样的套路,主要区别就是三角形和长方形的摆放位置,其余都是类似的做法~