Show and hide tooltips with CSS and Javascript

Question

I use CSS to show and hide tooltips when I hover over them. Now I need this to work for mobile devices with a click function. I got the first tooltip running through toggling a class via Javascript. How can I apply that function for all tooltips now? I have around 30 to 40. Any idea how I can achieve my goal?

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>

question from:https://stackoverflow.com/questions/65601913/show-and-hide-tooltips-with-css-and-javascript

Answer 1

use an extra class. add this to your css:

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

and replace this class inside your js code:

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

PS: NEVER use same id for multiple HTML elements. like ever!

EDIT: use below javascript code to select by class

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