纯css实现漂亮健壮的tooltip

csspart.btn{width:100px;位置：相对；显示：内联块；背景色：金色；填充：5px；光标：指针；}.btn.tip{显示：无；宽度：100px；背景色：黑色；颜色：#fff；文本对齐：居中；填充：5px0；字体大小：12px；/*垂直居中*/position:absolute;顶部：50%；转换：translateY(-50%);左：118px；z-index:1;}.btn:hover.tip{display:block;}初始设置提示隐藏display:none;,当鼠标向上移动时，设置提示样式为display:block;显示。其实终极版的改进版对于一般的使用来说已经够用了，但是同事觉得不够漂亮，画质不够高，没有动画。无意中逛到百度云管理后台页面，发现一排漂亮的tooltips，这不正是我需要的吗？暗自高兴！所以我研究了它并投入使用。html部分：鼠标移动到这里css部分：.btn{position:relative;显示：块；边距：100px自动；填充：10px；字体大小：14px；背景：#fff；颜色：绿色；边框：1px纯绿色；游标：指针；}[提示]：在{内容：attr（提示）之后；可见性：隐藏；/*实现垂直居中*/position:absolute;顶部：50%；变换：平移（-5px，-50%）；过渡：所有.3s；左：100%；不透明度：0；/*空白问题*/white-space:pre;字体大小：16px；填充：5px10px；背景色：rgba(18,26,44,0.8)；颜色：#fff；box-shadow:1px1px14pxrgba(0,0,0,0.1)}[tip]:hover{/*即兼容*/overflow:visible}.btn:hover:after{opacity:.8;过渡：所有.3s；变换：平移（5px，-50%）；能见度：可见；显示：块；}首先，在标签中添加属性tip，在css样式中使用cont耳鼻喉科：属性（提示）；获取属性值默认设置提示hiddenvisibility:hidden;.使用变换：translate(-5px,-50%);达到定心和偏移的效果。动画时间设置为0.3s:transition:all.3s;。注意：空白：pre；就是考虑到提示中可能会有空格，所以空格也需要显示出来。