如何使用單個 Vanilla JS 工具提示 div 顯示 100 多個不同的工具提示？

Question

我已經制作了一個 HTML/JS 網站，我想在該網站上顯示圖標的工具提示，如下所示：

我想看到的：

1. 當我 hover 什么都不做時，我希望將 div 隱藏在 CSS 中。
2. 當我在另一個圖標上 hover 時，我希望 div 獲得正確的信息。

我想如何編碼：

像這樣使用單個頂級 DIV：

<div id="circle" class="circleTT">
<div id="circlecontent" class="civBoxTT">
  <h3><b>Villager (SAMPLE: NOT LIVE DATA)</b></h3>Gathers Wood, Food, Stone, and Gold. Builds and repairs buildings
  and can repair
  siege engines and naval units. - Weak in combat<br><img src="img/resourcefoodicon.png">50<br><img
    src="img/house.png">1<br><img src="img/timetobuild.png">20s<br><br>
</div>

為什么？ 因為當使用更簡單的工具提示時有兩個問題：要么我無法在工具提示中顯示圖像，要么工具提示將在 DIV 內並會在該部分添加滾動條。 因為父 div 能夠折疊，據我所知這是無法修復的。

然后，像這樣在 Javascript 中添加鼠標懸停：

const isHover = e => e.parentElement.querySelector(':hover') === e;

  const myDiv = document.getElementById('tooltip');
  /*for (var i = 0; i < myDiv.length; i++) {*/
  document.addEventListener('mousemove', function checkHover() {
    const hovered = isHover(myDiv);
    if (hovered !== checkHover.hovered) {
      if (hovered) {
        document.getElementById('circlecontent').innerHTML = "<h3><b>Villager (age: 1)</b></h3>Gathers Wood, Food, Stone, and Gold. Builds and repairs buildings and can repair siege engines and naval units. - Weak in combat<br><img src=\"img/resourcefoodicon.png\">50<br><img src=\"img/house.png\">1<br><img src=\"img/timetobuild.png\">20s<br><br>";
      }
      else {
        document.getElementById('circlecontent').innerHTML = "";
      }
      checkHover.hovered = hovered;
    }
  });
  /*}*/

  let circle = document.getElementById('circle');

  const onMouseMove = (e) => {
    circle.style.left = e.pageX + 5 + 'px';
    circle.style.top = e.pageY + 5 + 'px';
  }

  document.addEventListener('mousemove', onMouseMove);

這都是來自其他人如何制作類似工具提示的示例

但是，當我簡單地將鼠標懸停 Javascript 應用於所有元素時，網頁會變得非常慢，可能是因為每次鼠標移動它接收鼠標懸停 state 100-200 次。

用簡單的 Vanilla JS 編寫代碼的好方法是什么？

Answer 1

經過更多的試驗和錯誤修復它像這樣：

///////////////////////////////////////////////////
  // SHOW tooltips
  ///////////////////////////////////////////////////
  let tooltipContainer = document.getElementById('tooltipContainer');
  const tooltipBox = document.getElementById('tooltipBox');
  document.addEventListener('mousemove', function checkHover(e) {
    tooltipContainer.style.left = getWidth() > e.pageX + 400 ? e.pageX + 2 + 'px' : e.pageX - 402 + 'px';
    tooltipContainer.style.top = e.pageY + 2 + 'px';
    const allTooltips = document.getElementsByClassName('tooltip');
    for (var i = 0; i < allTooltips.length; i++) {
      if (allTooltips.item(i).querySelector(':hover')) {
        tooltipBox.innerHTML = allTooltips.item(i).lastChild.innerHTML; tooltipBox.style.display = "block"; return;
      }
    }
    tooltipBox.innerHTML = ""; tooltipBox.style.display = "none";
  });

基本上每次鼠標移動時都會有一個 MouseMove 事件檢查鼠標 position，調整 DIV 的 position，最后使用工具提示遍歷所有元素以檢查是否有懸停。