如何使用JavaScript在div中添加工具提示

要使用 JavaScript 向 div 添加工具提示，首先创建一个将生成工具提示内容的函数。接下来，向 div 添加一个事件监听器，该监听器将在 div 被悬停时调用该函数并显示工具提示。最后，使用CSS来设计工具提示的样式，并将其适当地定位。

工具提示是一个小文本框，当用户将鼠标悬停在网页上的特定元素（如按钮、链接或图像）上时就会出现。工具提示通常包含关于用户悬停的元素的额外信息或背景。工具提示通常被用于用户界面，为用户提供关于特定元素的额外信息，而不会使主界面变得杂乱。它们也被用来为用户提供使用某个特定功能或元素的额外背景或说明。

方法

首先，在HTML中创建一个div元素，并给它一个id或类名，以便能够用JavaScript来定位它。

<div id="myDiv">This is my div</div>

接下来，创建一个工具提示元素，如span，并给它一个类名。

<div id="myDiv">This is my div <span class="tooltip">This is my tooltip</span></div>

接下来，在JavaScript中，使用document.getElementById或document.querySelector方法来选择div元素，并为mouseover和mouseout事件添加一个事件监听器–。

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", showTooltip);
myDiv.addEventListener("mouseout", hideTooltip);

在showTooltip函数中，使用document.querySelector方法来选择工具提示元素，并将其显示属性设置为 “block”，使其可见。

function showTooltip() {
   const tooltip = document.querySelector(".tooltip");
   tooltip.style.display = "block";
}

在hideTooltip函数中，使用document.querySelector方法来选择工具提示元素，并将其显示属性设置为 “none”，使其不可见。

function hideTooltip() {
   const tooltip = document.querySelector(".tooltip");
   tooltip.style.display = "none";
}

你也可以使用CSS来为工具提示元素设置样式，例如添加背景颜色和文本颜色：

.tooltip {
   display: none;
   background-color: yellow;
   color: black;
}

例子

下面是上述方法的一个完整的工作实例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      .tooltip {
         display: none;
         background-color: yellow;
         color: black;
         position: absolute;
      }
   </style>
   <title>Tooltip to a div</title>
</head>
<body>
   <div id="myDiv">
      This is my div
      <span class="tooltip">This is my tooltip</span>
  </div>
  <script>
      const myDiv = document.getElementById("myDiv");
      myDiv.addEventListener("mouseover", showTooltip);
      myDiv.addEventListener("mouseout", hideTooltip);
      function showTooltip() {
         const tooltip = document.querySelector(".tooltip");
         tooltip.style.display = "block";
      }
      function hideTooltip() {
         const tooltip = document.querySelector(".tooltip");
         tooltip.style.display = "none";
      }  
  </script>
</body>
</html>

这段代码将创建一个文本为 “这是我的 div “的 div 和一个写有 “这是我的工具提示 “的工具提示元素。当鼠标悬停在该div上时，将显示工具提示，而当鼠标离开该div时，工具提示将消失。CSS被用来给工具提示元素设置样式，给它一个黄色的背景和黑色的文本。

JavaScript代码使用addEventListener方法来监听div上的mouseover和mouseout事件，并调用适当的函数来显示和隐藏工具提示。