css中提示框怎么做

CSS中的提示框是一个非常常用的UI元素，可以用来提醒用户进行某些操作，或者向用户展示一些信息。下面介绍几种实现提示框的方法。

/* 方式一：基本样式 */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: Nowrap;
  opacity: 0.7;
}

/* 方式二：利用伪元素和内容属性 */
.tip {
  position: relative;
  display: inline-block;
}

.tip::before {
  content: attr(data-tip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: Nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tip:hover::before {
  opacity: 0.7;
}

/* 方式三：利用伪元素和变换 */
.popover {
  position: relative;
  display: inline-block;
}

.popover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #333 transparent;
  transform: translateY(-100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popover:hover::before {
  opacity: 0.7;
}

.popover::after {
  content: attr(data-popover);
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: Nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popover:hover::after {
  opacity: 0.7;
  transform: translate(-50%,-10px);
}

以上三种方式都是利用CSS的一些特性和技巧来实现的，具体应用要根据实际情况和需求来选择合适的方法，并进行适当的调整。