CSS 提示工具(Tooltip)

最新推荐文章于 2024-06-27 10:54:13 发布

weixin_33806300

最新推荐文章于 2024-06-27 10:54:13 发布

阅读量120

点赞数

原文链接：https://segmentfault.com/a/1190000015676063

版权

CSS 提示工具(Tooltip)

本文为大家介绍如何使用HTML和CSS来实现提示工具，

提示工具在鼠标移动到制定元素后触发,先看下面示例：

图片描述

1.基础提示工具代码如下：

<!doctye html>

<html>
<head>
    <meta charset="utf-8"/>
    <title>右提示工具</title>
    <style>
    *{
    margin:0;
    padding:0;
}
body{
    text-align:center;
    padding-top:50px;
}
.tooltip{
    display:inline-block;
    position:relative;
}
.btn{
    display:block;
    padding:20px;
    background:#f0f;
    color:white;
}
.bottom{
    position:relative;
    background:#aaa;
    width:160px;
    position:absolute;
    left:110%;
    top:10%;
    text-align:left;
    padding:12px;    
    opacity:0;
    transition:1s;
    color:white;    
    border-radius:10px;    
}
.tooltip:hover .bottom{    
    opacity:1;
}
.bottom:after{
    content:"";
    border:5px solid;
    border-color:transparent #aaa transparent  transparent ;
    position:absolute;    
    left:-10px;
    margin-top:5px;
}
    </style>
</head>
<body>
    <div class="tooltip"> 
        <span class="btn">右提示工具</span>    
        <div class="bottom">
            提示工具
        </div>    
    </div>
</body>
</html>

运行结果如下图：

图片描述

2.添加箭头

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

3.技术要点：

父元素相对定位
提示框绝对定位
箭头绝对定位
淡入效果（我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果）

持续更新，欢迎大家指教！

weixin_33806300

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫