纯CSS3实现鼠标悬停提示气泡效果-前端开发

下面是详细讲解纯CSS3实现鼠标悬停提示气泡效果的完整攻略：

下面是详细讲解"纯CSS3实现鼠标悬停提示气泡效果"的完整攻略：

一、简介

在Web开发中，经常需要对某些元素添加提示信息，尤其是一些带有缩略语或者关键词的标签，需要在鼠标悬停时显示具体的解释。常见的方法是通过JavaScript实现，但其需要额外的代码和操作，而纯CSS呈现这种效果更简单、更轻量级、更优雅。这种效果通常被称作"鼠标悬停提示气泡效果"。

二、实现步骤

要实现这种效果，需要使用CSS的伪元素选择器::before和::after，同时使用CSS3的transition以及opacity属性，默认情况下气泡是半透明不显示的，只有在鼠标悬停在相关元素上时，气泡才会通过transition逐渐变成不透明显示气泡内容。下面是实现的具体步骤。

(1) 创建HTML结构

首先，在HTML中创建一个需要显示提示信息的元素，如下所示，其中span元素用于显示提示信息，其初始情况下是半透明不可见的。

<div class="tooltip">
  <span>这是提示信息</span>
  相关元素
</div>

(2) 声明CSS样式

在CSS中，可以通过伪元素选择器::before和::after来创建气泡的样式，同时需要通过transition属性控制opacity逐渐变化的过程。下面是关键CSS代码。

/* 定位tooltip元素 */
.tooltip {
  position: relative;
  display: inline-block;
}

/* 鼠标悬停显示气泡 */
.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
}

/* 定义tooltip箭头的样式 */ 
.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 定义tooltip气泡的样式 */
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-left: -60px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

由上述CSS代码可知，before元素用来绘制气泡的三角形箭头，而after元素用来展示气泡的具体内容，其中opacity属性用来控制气泡的初始情况，同时用于过渡动画的展示。需要注意的是，before和after元素的opacity初始值应为0，只有在鼠标悬停时变成1。

(3) JavaScript实现

以上操作都可以在CSS中实现，不需要JavaScript的干预，但如果需要动态获取tooltip元素的内容，则需要借助JavaScript，具体代码如下所示。

var tooltip = document.querySelectorAll(".tooltip");
for (var i = 0; i < tooltip.length; i++) {
  tooltip[i].setAttribute("data-tooltip", tooltip[i].childNodes[0].nodeValue);
}

通过JS获取哪些元素需要具备悬停显示气泡效果，并获取其对应展示的提示信息，最后将其赋值给after元素的data-tooltip属性。

三、示例说明

(1) 示例1

下面是以一个链接元素为例子声明的CSS代码，当鼠标悬停在该链接上时，会在链接下方显示一个灰色的气泡，展示链接的URL信息。

<a href="http://github.com" class="tooltip">Github</a>

.tooltip {
  position: relative;
  display: inline-block;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #333;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ccc transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-left: -60px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

(2) 示例2

下面是以一个表单文本框为例子声明的CSS代码，当鼠标悬停在文本框上时，会在文本框右侧显示一个黑色的气泡，展示文本框输入格式的提示信息。

<input type="text" class="tooltip" placeholder="请输入格式为xxxx-xxxx-xxxx的序列号">

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

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip::after {
  content: attr(placeholder);
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -15px;
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}