CSS特效十：信息提示框

今天来讲一个信息提示框，可以在上下左右四个方向展示，先给大家看看效果图（文末有彩蛋！！！）：

其中的重点就是一个尖角的展示：

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。
注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示。
border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

附上源码：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>信息提示框</title>
</head>
<style>.tooltip {/* 设置这个属性可以为下面的子元素作参考 */position: relative;display: inline-block;/* 设置底部的边框 */border-bottom: 1px dashed black;}.tooltip .tooltiptext {/* 隐藏该元素 */visibility: hidden;width: 120px;background-color: #555;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;/* 设置该元素在z轴处于优先显示的位置，因为其他元素没有设置z—index */z-index: 1;/* 超过了100%就是反向距离 */bottom: 125%;left: 50%;margin-left: -60px;opacity: 0;/* 延迟一秒再变为清晰度是1 */transition: opacity 1s;}/* 设置提示框的after属性，并添加一个尖角 */.tooltip .tooltiptext::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;}/* hover的时候显示提示框 */.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}
</style><body><body style="text-align:center;"><h2>提示信息框</h2><p>鼠标移动到以下文本上:</p><div class="tooltip">来到我这里呀！<span class="tooltiptext">你还真来呀！</span></div></body>
</body></html>

彩蛋来了！！！

附上一段神奇的代码，效果自己运行观看：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>更漂亮的信息提示</title>
</head><style>.wrapper {text-transform: uppercase;background: #ececec;color: #555;cursor: help;font-family: "Gill Sans", Impact, sans-serif;font-size: 20px;margin: 100px 75px 10px 75px;padding: 15px 20px;position: relative;text-align: center;width: 200px;-webkit-transform: translateZ(0);/* webkit flicker fix */-webkit-font-smoothing: antialiased;/* webkit text rendering fix */}.wrapper .tooltip {background: #1496bb;bottom: 100%;color: #fff;display: block;left: -25px;margin-bottom: 15px;opacity: 0;padding: 20px;pointer-events: none;position: absolute;width: 100%;-webkit-transform: translateY(10px);-moz-transform: translateY(10px);-ms-transform: translateY(10px);-o-transform: translateY(10px);transform: translateY(10px);-webkit-transition: all .25s ease-out;-moz-transition: all .25s ease-out;-ms-transition: all .25s ease-out;-o-transition: all .25s ease-out;transition: all .25s ease-out;-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);}/* This bridges the gap so you can mouse into the tooltip without it disappearing */.wrapper .tooltip:before {bottom: -20px;content: " ";display: block;height: 20px;left: 0;position: absolute;width: 100%;}/* CSS Triangles - see Trevor's post */.wrapper .tooltip:after {border-left: solid transparent 10px;border-right: solid transparent 10px;border-top: solid #1496bb 10px;bottom: -10px;content: " ";height: 0;left: 50%;margin-left: -13px;position: absolute;width: 0;}.wrapper:hover .tooltip {opacity: 1;pointer-events: auto;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);}/* IE can just show/hide with no transition */.lte8 .wrapper .tooltip {display: none;}.lte8 .wrapper:hover .tooltip {display: block;}
</style><body><div><div class="wrapper">I have a tooltip.<div class="tooltip">I am a tooltip!</div></div></div></body></html>