使用 CSS 和 Javascript 显示和隐藏工具提示

Question

当我将鼠标悬停在工具提示上时，我使用 CSS 来显示和隐藏它们。现在我需要它来为具有点击功能的移动设备工作。我通过 Javascript 切换类获得了第一个工具提示。我现在如何将该功能应用于所有工具提示？我有大约 30 到 40 个。知道如何实现我的目标吗？

document.getElementById("website-tooltip-container").addEventListener("click", function() {
  var element = document.getElementById("test");
  element.classList.toggle("website-tooltiptext-visible");
});

/* Tooltip Container */

.website-tooltip {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 400;
  color: #666;
}


/* Tooltip text */

.website-tooltip .website-tooltiptext {
  visibility: hidden;
  max-width: 350px;
  font-family: open sans;
  font-size: 13px;
  line-height: 22px;
  background-color: #FFFFFF;
  color: #666;
  text-align: left;
  padding: 11px 15px 11px 15px !important;
  border-radius: 3px;
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 100%;
  margin: 0px 0px 0px 0px;
}


/* Show the tooltip text when you mouse over the tooltip container */

.website-tooltip:hover .website-tooltiptext {
  visibility: visible;
}


/* Hide when hovering over tooltip div */

div.website-tooltiptext:hover {
  display: none;
}


/* Toggle this class to show Tooltip on click via Javascript */

.website-tooltiptext-visible {
  visibility: visible !important;
  display: block !important;
}

<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
  <div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
  <div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
  <div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
  <div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

感谢您的帮助！

Answer 1

使用额外的课程。 将此添加到您的 CSS：

 .website-tooltiptext-visible {
            visibility: visible !important;
        }

并在你的 js 代码中替换这个类：

element.classList.toggle("website-tooltiptext-visible");

PS：切勿对多个 HTML 元素使用相同的 id。一如既往！

编辑：使用下面的 javascript 代码按类选择

Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
    (element) => {
        element.addEventListener("click", () => {
            element.classList.toggle("website-tooltiptext-visible");
        });
    }
);