JS+CSS实现一个气泡提示框

作为网站作者，我很乐意为大家详细讲解JS+CSS实现一个气泡提示框的完整攻略。下面是具体步骤：

步骤一：HTML结构搭建

首先，我们需要在HTML中先准备好一个触发动作的元素，例如一个按钮，代码如下：

<button class="btn">点击我</button>

步骤二：CSS美化元素

然后，我们需要对该元素做一些CSS样式设置，使其更加美观。例如：

.btn {
  background-color: #f44336;
  border: none;
  color: white;
  padding: 16px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 5px;
  cursor: pointer;
}

步骤三：JS动态创建和显示气泡提示框

接下来，我们需要编写JS代码动态创建和显示气泡提示框。具体步骤如下：

（1）编写CSS样式设置气泡提示框

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  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: #555 transparent transparent transparent;
}

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

（2）编写JS代码创建气泡提示框

function createTooltip() {
  // 创建气泡提示框
  let tooltip = document.createElement("span");
  tooltip.classList.add("tooltiptext");
  tooltip.innerText = "Hello World!";
  // 添加气泡提示框到触发元素中
  let btn = document.querySelector(".btn");
  btn.appendChild(tooltip);
}

（3）调用JS代码，实现气泡提示框

我们可以在按钮上添加一个事件监听，当鼠标悬浮在按钮上时，调用刚才编写的createTooltip()函数创建并显示气泡提示框。

let btn = document.querySelector(".btn");
btn.addEventListener("mouseover", function() {
  createTooltip();
});

示例说明

以上是我们实现JS+CSS气泡提示框的完整攻略。为了让大家更好地理解，我会提供两个示例，一个用于展示静态气泡提示框，一个用于展示动态气泡提示框。

示例一：静态气泡提示框

这个示例中，我们直接在HTML中编写一个静态的气泡提示框。点击按钮即可弹出该气泡提示框。

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  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: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<button class="btn">点击我
  <span class="tooltiptext">Hello World!</span>
</button>

示例二：动态气泡提示框

这个示例中，我们使用JS代码动态创建和显示气泡提示框。点击按钮即可弹出该气泡提示框。

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  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: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<button class="btn">点击我</button>

<script>
function createTooltip() {
  // 创建气泡提示框
  let tooltip = document.createElement("span");
  tooltip.classList.add("tooltiptext");
  tooltip.innerText = "Hello World!";
  // 添加气泡提示框到触发元素中
  let btn = document.querySelector(".btn");
  btn.appendChild(tooltip);
}

let btn = document.querySelector(".btn");
btn.addEventListener("mouseover", function() {
  createTooltip();
});
</script>

这就是JS+CSS实现气泡提示框的完整攻略，希望对大家有所帮助！