Trigger the JavaScript function just for the actual clicked id

I have a bunch of tooltips on one page. The child div (tooltip) gets shown through css when hovering over the parent div. Now I try to get it running on click. The first tooltip works and gets shown through my code and also gets hidden when I click outside the child div. I know the issue is with the id (has to be unique). How can I achieve, that the function is directly at the div applied, that I click on. Like when I click on the third div (parent), that it also gets triggered there with its child div (tooltip)? For me it´s weird that Javascript can´t identify on which element I click and then apply my function to that element unless I want something else… Now the first works, the rest is ignored… Hope u can help.

Thanks

//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, 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>

98 thoughts on “Trigger the JavaScript function just for the actual clicked id”

Leave a Comment