电话
13363039260
CSS的 Tooltip（提示工具）介绍
2024-01-18 10:52 小编
一、基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：
/*Tooltip容器*/
.tooltip{
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;/*悬停元素上显示点线*/
}
/*Tooltip文本*/
.tooltip.tooltiptext{
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
padding:5px0;
border-radius:6px;
/*定位*/
position:absolute;
z-index:1;
}
/*鼠标移动上去后显示提示框*/
.tooltip:hover.tooltiptext{
visibility:visible;
}
实例解析
HTML)使用容器元素(like<div>)并添加"tooltip"类。在鼠标移动到<div>上时显示提示信息。
提示文本放在内联元素上(如<span>)并使用class="tooltiptext"。
CSS)tooltip类使用position:relative,提示文本需要设置定位值position:absolute。注意:接下来的实例会显示更多的定位效果。
tooltiptext类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示。设置了一些宽度、背景色、字体色等样式。
CSS3border-radius属性用于为提示框添加圆角。
:hover选择器用于在鼠标移动到到指定元素<div>上时显示的提示。
二、定位提示工具
以下实例中，提示工具显示在指定元素的右侧(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;
猜你喜欢
联络方式：
13363039260
微信二维码 