如何使用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方法选择工具提示元素，并将其display属性设置为“block”以使其可见。

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

  • 在hideTooltip函数中，使用document.querySelector方法选择工具提示元素，并将其display属性设置为“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>

此代码将创建一个包含文本“This is my div”的div和一个显示文本“This is my tooltip”的工具提示元素。当鼠标悬停在div上时，将显示工具提示；当鼠标离开div时，工具提示将消失。CSS用于设置工具提示元素的样式，使其具有黄色背景和黑色文本。

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

更新于：2023年2月6日

浏览量：13K+

启动你的职业生涯

完成课程获得认证

开始学习
广告