css3的气泡提示

CSS3的气泡提示让网页中的提示信息更加生动，让用户更直观地了解到网页内容的相关信息。使用CSS3实现气泡提示，代码简洁明了，效果优美。

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  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: #555 transparent transparent transparent;
}

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

以上代码是一个基本的CSS3气泡提示的实现，首先，使用position属性，让气泡提示与其他元素进行相对定位。然后，使用visibility属性将气泡提示的可见性设置为隐藏。后面的样式规则将气泡提示的样式进行设置，包括宽度，背景颜色，字体颜色，圆角边框，位置等。接着，在气泡提示后面使用"::after"伪元素，将三角形小箭头进行设置。

在最后，使用:hover伪类让鼠标悬停时将气泡提示设置为可见。