[分享]css3提示工具小虎

CSS3提示工具小虎是一种在网页设计中常用的工具，使用它可以为网页元素添加自定义的提示信息，提高用户体验。下面我们一起来了解一下使用方法。.tooltip { : relative; display:...

CSS3提示工具小虎是一种在网页设计中常用的工具，使用它可以为网页元素添加自定义的提示信息，提高用户体验。下面我们一起来了解一下使用方法。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

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

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

代码中，.tooltip类为需要添加提示信息的元素添加了相对定位，以便为它下方的tooltiptext类所用。这里通过添加border-bottom样式为触发tooltip类元素的hover事件提供了一个显示提示信息的机会。tooltiptext类的visibility属性设置为hidden以保证元素默认处于不可见状态。tooltiptext类的样式通过绝对定位、z-index和margin-left样式实现在元素下方显示，并通过:hover伪类来控制它的显示和隐藏。其中伪元素::after用于为tooltiptext类新建一个三角形来指向触发tooltip类的元素。

使用CSS3提示工具小虎可以轻松为网页元素添加个性化提示信息，增强网页的交互性和用户体验。希望帮到大家。