CSS的 Tooltip（提示工具）介绍

上时显示的提示。 　　二、定位提示工具 　　以下实例中，提示工具显示在指定元素的右侧(left:105%)。 　　注意top:-5px同于定位在容器元素的中间。使用数字5因为提示文本的顶部和底部的内边距（padding）是5px。 　　如果你修改padding的值，top值也要对应修改，这样才可以确保它是居中对齐的。 　　在提示框显示在左边的情况也是这个原理。 　　显示在右边： 　　.tooltip.tooltiptext{ 　　top:-5px; 　　left:105%; 　　} 　　显示在左边： 　　.tooltip.tooltiptext{ 　　top:-5px; 　　right:105%; 　　} 　　如果你想要提示工具显示在头部和底部。我们需要使用margin-left属性，并设置为-60px。这个数字计算来源是使用宽度的一半来居中对齐，即：width/2(120/2=60)。 　　显示在头部： 　　.tooltip.tooltiptext{ 　　width:120px; 　　bottom:100%; 　　left:50%; 　　margin-left:-60px; /*使用一半宽度(120/2=60)来居中提示工具*/ 　　} 　　显示在底部： 　　.tooltip.tooltiptext{ 　　width:120px; 　　top:100%; 　　left:50%; 　　margin-left:-60px; /*使用一半宽度(120/2=60)来居中提示工具*/ 　　} 　　三、添加箭头 　　我们可以用CSS伪元素::after及content属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。 　　以下实例演示了如何为显示在顶部的提示工具添加底部箭头： 　　.tooltip.tooltiptext::after{ 　　content:""; 　　position:absolute; 　　top:100%; /*提示工具底部*/ 　　left:50%; 　　margin-left:-5px; 　　border-width:5px; 　　border-style:solid; 　　border-color:blacktransparenttransparenttransparent; 　　} 　　实例解析 　　在提示工具内定位箭头:top:100%,箭头将显示在提示工具的底部。left:50%用于居中对齐箭头。 　　注意：border-width属性指定了箭头的大小。如果你修改它，也要修改margin-left值。这样箭头在能居中显示。 　　border-color用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。 　　以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色： 　　底部提示框/顶部箭头： 　　.tooltip.tooltiptext::after{ 　　content:""; 　　position:absolute; 　　bottom:100%; /*提示工具头部*/ 　　left:50%; 　　margin-left:-5px; 　　border-width:5px; 　　border-style:solid; 　　border-color:transparenttransparentblacktransparent; 　　} 　　以下两个实例是左右两边的箭头实例： 　　右侧提示框/左侧箭头： 　　.tooltip.tooltiptext::after{ 　　content:""; 　　position:absolute; 　　top:50%; 　　right:100%; /*提示工具左侧*/ 　　margin-top:-5px; 　　border-width:5px; 　　border-style:solid; 　　border-color:transparentblacktransparenttransparent; 　　} 　　左侧提示框/右侧箭头： 　　.tooltip.tooltiptext::after{ 　　content:""; 　　position:absolute; 　　top:50%; 　　left:100%; /*提示工具右侧*/ 　　margin-top:-5px; 　　border-width:5px; 　　border-style:solid; 　　border-color:transparenttransparenttransparentblack; 　　} 　　四、淡入效果 　　我们可以使用CSS3transition属性及opacity属性来实现提示工具的淡入效果: 　　左侧提示框/右侧箭头： 　　.tooltip.tooltiptext{ 　　opacity:0; 　　transition:opacity1s; 　　} 　　.tooltip:hover.tooltiptext{ 　　opacity:1; 　　} 　　五、代码实例： 　　 　　 　　 　　 　　 　　.wrapper{ 　　text-transform:uppercase; 　　background:#ececec; 　　color:#555; 　　cursor:help; 　　font-family:"GillSans",Impact,sans-serif; 　　font-size:20px; 　　margin:100px75px10px75px; 　　padding:15px20px; 　　position:relative; 　　text-align:center; 　　width:200px; 　　-webkit-transform:translateZ(0); /*webkitflickerfix*/ 　　-webkit-font-smoothing:antialiased; /*webkittextrenderingfix*/ 　　} 　　.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.25sease-out; 　　-moz-transition:all.25sease-out; 　　-ms-transition:all.25sease-out; 　　-o-transition:all.25sease-out; 　　transition:all.25sease-out; 　　-webkit-box-shadow:2px2px6pxrgba(0,0,0,0.28); 　　-moz-box-shadow:2px2px6pxrgba(0,0,0,0.28); 　　-ms-box-shadow:2px2px6pxrgba(0,0,0,0.28); 　　-o-box-shadow:2px2px6pxrgba(0,0,0,0.28); 　　box-shadow:2px2px6pxrgba(0,0,0,0.28); 　　} 　　/*Thisbridgesthegapsoyoucanmouseintothetooltipwithoutitdisappearing*/ 　　.wrapper.tooltip:before{ 　　bottom:-20px; 　　content:""; 　　display:block; 　　height:20px; 　　left:0; 　　position:absolute; 　　width:100%; 　　} 　　/*CSSTriangles-seeTrevor'spost*/ 　　.wrapper.tooltip:after{ 　　border-left:solidtransparent10px; 　　border-right:solidtransparent10px; 　　border-top:solid#1496bb10px; 　　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); 　　} 　　/*IEcanjustshow/hidewithnotransition*/ 　　.lte8.wrapper.tooltip{ 　　display:none; 　　} 　　.lte8.wrapper:hover.tooltip{ 　　display:block; 　　}



本文转载自中文网