利用CSS3中：after和：before属性制作bootStrap中的toolTip

最新推荐文章于 2021-09-24 16:20:05 发布

乐橙Web

最新推荐文章于 2021-09-24 16:20:05 发布

阅读量3.1k

点赞数 1

分类专栏：工作网页特效日常积累文章标签： WEB前端 H5 CSS3 toolTip

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/62433935

版权

工作网页特效日常积累专栏收录该内容

11 篇文章 0 订阅

订阅专栏

第一次写博客，不免还有点小激动，希望博文中有差错的地方欢迎大家勘正，指导~

前几天看了看bootStrap中的toolTip觉得蛮好看的，就想着自己试着写一写。

先贴上两个伪元素的兼容性

分为三个部分解决这个问题：①html布局问题②toolTip提示框的拼接③toolTip的定位问题

①HTML代码

<!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>
</head>

</style>
<body>
    <button class="button" data-tip="鼠标放上去后触发了toolTip">触发toolTip</button>
     //HTML5 增加了一项新功能是 自定义数据属性 ，也就是  data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，
     //来进行一些数据的存放。
 </body>
</html>

②实现toolTip框的拼接。

首先‘正方形’的框，我们用:before【也可以用：after来实现】这次我们用一个div框来实现

<!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>
</head>
<style>
    body{
       background-color:slategray;
    }
    div{
        width:200px;
        height:50px;
        margin:240px;
        padding:20px 0px;
        line-height:50px;
        font-family: '微软雅黑';
        text-align:center;
        border-radius:5px;
        background-color:white;
        position:relative;
    }
    div:before{
        content: '';
        position:absolute;
        left:-30px;
        border-left:15px solid transparent;
       border-top:15px solid transparent;
        border-right:15px solid white;
        border-bottom:15px solid transparent;        
    }
</style>
<body>
  <div>你好，在么</div>
</body>
</html>

这个关键点就在于:before中border属性。transparent是透明的。border顺序为下图

，顺时针顺序，从上面红色开始。这次我们设置了右边的颜色为white.所以就留下白色三角的形状。再将目标元素设置为relative其定位方式定位,其伪元素:before里面设置为absolute，设置left的值让其往左移动，这样就能拼接住了。

③toolTip定位问题

<!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>
    button{
        position:relative;
        margin-top:100px;
        margin-left:100px;
    }
    button:after{
        content:attr(data-tip);
        /*这个是用来显示标签属性中data-tip的值*/
        color:white;        
        margin:11px;        
        padding:10px;
        position:absolute;        
        left:10%;
        /*这个left的属性值是相对于目标元素而言的*/
        border-radius:3px;
        transition: 1s ease; 
         /*用来设置过度的效果*/
       	white-space: nowrap;
        /*强制在data-tip中内容保存在一行中进行显示*/
        bottom:100%;
        /*一般after元素都是在元素后面，bottom:100%是为了将*/
        opacity:0;
        /*给after后的属性加个透明度，用来控制过度效果*/
        background-color:rgba(0, 0, 0, 0.8);
        /*设置背景色为黑色，这样设置的话字体颜色的透明度不会被改变*/
        pointer-events: none;   
        /*pointer-events用来设置链接无法点击*/
    }
    button:before{
        content:'';
        display:block;
        left:50%;
        bottom:40%;        
        opacity:0;
        margin:10px;        
        position:absolute;
        transition: 1s ease;        
        border-top:6px solid rgba(0, 0, 0, 0.8);
        border-left:6px solid transparent;
        border-right:6px solid transparent;
        border-bottom:6px solid transparent;   
        pointer-events: none;
    }
    button:hover:before,button:hover:after{
        opacity: 1;
   }
   .button:hover:before{
       	margin-bottom:10px;
           /*过度效果这样书写才能有效*/
   }
   .button:hover:after{
        margin-bottom:10px;
   }
    </style>
</head>

</style>
<body>
    <button class="button" data-tip="鼠标放上去后触发了toolTip">触发toolTip</button>
</body>
</html>

在使用after或者before其实被添加的伪元素并不会直接添加到元素正前面或者正后面，而是会添加在目标元素内容的前面或者后面。这时候就用定位来解决这个问题，首先目标元素中设置为position：relative;然后将：after与：before元素设置为绝对定位，进行调整，兼和margin值来进行调整，bottom:100%;可以将伪元素直接定位到目标元素上面。

总体就是这样，提示条位于上方下方同原理。

感觉自己写的弱爆了，蓝瘦。

感谢大家的阅读，希望与大家共同进步!!

参考文档：CSS参考手册http://css.doyoe.com/

乐橙Web

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用CSS3中：after和：before属性制作bootStrap中的toolTip

第一次写博客，不免还有点小激动，希望博文中有差错的地方欢迎大家勘正，指导~ 前几天看了看bootStrap中的toolTip觉得蛮好看的，就想着自己试着写一写。先贴上两个伪元素的兼容性分为三个部分解决这个问题：①html布局问题②toolTip提示框的拼接③toolTip的定位问题 ...
复制链接

扫一扫