CSS工具提示

工具提示

当用户将鼠标悬停于元素上时，工具提示通常用于提供关于内容的额外信息。

基础的工具提示

<style>
/* Tooltip 容器 */
.tooltip {
  position: relative;/*用于定位，在下面会详细展示*/
  display: inline-block;/*设置为行内块级元素*/
  border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线也就是设置底部边框 */
}

/* Tooltip 文本   选择具有类.tooltip的元素的具有.tooltiptext类的子级元素*/
.tooltip .tooltiptext {
  visibility: hidden;/*隐藏提示块*/
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;/*设置边框圆角*/
 
  /* 定位工具提示文本 - 请看下面的例子 */
  position: absolute;
  z-index: 1;/*设置显示等级，越大显示的级数越大；显示的级数越大越不会被其他元素覆盖*/
}

/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {/*选择悬停时具有类.tooltip的元素的具有.tooltiptext类的子级元素*/
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

在容器<div class=“tooltip”>中，设置具有悬停效果的文本，然后在这个容器内再设置一个div元素用来存放悬停时将要显示的元素，使用:hover伪类和’ '空格子元素选择器.tooltip:hover .tooltiptext来达到显示元素内内容的效果。

定位工具提示

  position: absolute;
  z-index: 1;

上面的位置设置是上面这个设置。

如果要调整位置，那么可以使用left right top bottom ，分别表示距离左右上下的距离。

.tooltip .tooltiptext {
  top: -5px;
  left: 105%; 
}

比如说这个例子，left设置显示的提示框位于其容器左侧的整个容器宽度的105%处，top设置元素向上移动5px，因为5px是提示框元素的内边距，上调这个距离可以使提示框内文字与容器文字位于同一水平线上。

同理，可以设置

right: 105%;

如果设置上方显示或者下方显示提示框，可以参考下面示例：

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; 
}/*设置为上方*/

首先，设置了提示框的宽度，然后把提示框向上移动直到，提示框底部距离容器底部100%，然后将提示框移动到距离容器左方50%的地方，此时，提示框左侧距离容器左侧为半个容器宽，此时并没有居中，然后设置提示框左边距为半个提示框，这样，就将提示框设置到了容器中部。

同理设置为下方可以设置：

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

工具提示箭头

首先请看下面这个示例：

<div style="display:inline-block;border:50px solid;border-color:red yellow blue green;"></div>

这个div元素设置其display值为inline-block使其不会扩展为整个页面宽，然后设置边框属性，设置相应的边框宽度，而不设置div内的文字值以便于边框会完全填充内容空间，从而形成上图的效果，我们以此为基础，可以使用border-color属性为其设置颜色，可以有四个值，分别代表上右下左，我们将任意三个方向的颜色设置为其父级元素的颜色及可以达到隐藏效果，继承父级元素使用值transparent故而，有如下样式：

在适当的调整它的位置之后，我们可以把它放在消息提示框上，从而合成类似于气泡框的样式。

请点击这里

123456

在实例中我们使用：

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

top: 100% 将箭头放置在工具提示的底部。left: 50% 将使框左位于50%处。

将 margin-left 值设置为框宽，则刚好移动框的一个变长的一半（仔细想想，现在框宽对应的是四个三角形的高，也就是正方形边长的一半），这样可以使箭头居中。

border-color 用于设置边框颜色，设置一个后其余的设置为transparent隐藏框，最后展现出一个箭头类型。

对于位置的设置可以参考上例来进行改变，从而设置出箭头在上下左右的气泡框。

淡入的工具提示

可以使用过渡或者动画来为提示框的出现设计显示效果。

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

这样设置了淡入效果。

CSS效果在此页面无法显示，请访问 这里