如何使用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+

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告