使用 JavaScript/CSS 显示/隐藏点击时工具提示

如何解决使用 JavaScript/CSS 显示/隐藏点击时工具提示

试图让我的工具提示在点击时显示和隐藏。我设法用第一个工具提示做到了，但这对其他人不起作用。

我知道问题可能出在代码 document.getElementById 上，但我不知道我必须用哪个代码替换它，这样每个工具提示都会在点击时一个接一个地触发。

如何管理所有工具提示都显示和隐藏为第一个？

感谢您的支持！ ;)

//Showing the tooltip on click

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

//Removing tooltip when clicked outside tooltip container or outside tooltip itself

document.addEventListener('mouseup',function(e) {
  var container = document.getElementById('test');
  if (!container.contains(e.target)) {
    container.classList.remove("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.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>

感谢您的帮助！

解决方法

这个问题在我提出的一个类似问题中得到了回答。

Here the link to the question also in stackoverflow

在那里，您可以通过 JavaScript 或 :hover 伪类找到更深入的洞察力和可能的工具提示解决方案。