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

来源：互联网发布：latex矩阵方括号编辑：程序博客网时间：2024/06/06 08:44

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

前几天看了看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/

1 0