1

Trying to make my tooltips show and hide on click. I managed to do it with the first tooltip but this doesn´t work for the others.

I know that the problem might be with the code document.getElementById but I don´t know with which code I have to replace that, so that every tooltip gets triggered one after the other when clicked.

How can I manage that all the tooltips are shown and hidden as the first one?

Thanks for your support! ;)

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

Thanks for your help!

Artan
  • 63
  • 13
  • 1
    An `id` is supposed to be unique. Use the class instead to select all the elements `document.querySelectorAll('.website-tooltip')` and iterate over the resulting list of elements. –  Jan 10 '21 at 16:32
  • Here is how to iterate over selected items https://stackoverflow.com/questions/12330086/how-to-loop-through-selected-elements-with-document-queryselectorall – Ozgur Sar Jan 10 '21 at 16:35
  • Thanks for the fast response. I am not very good in JavaScript. Where do I have to put your piece of code and what exactly do you mean with "[...]iterate over the resulting list[...]"? Thank u. – Artan Jan 10 '21 at 16:36
  • Ok, this is too high for me. I have no idea how to implement that in my code. Can u help? :/ – Artan Jan 10 '21 at 16:40
  • `div id="website-tooltip-container"` should never be repeated. An ID should only ever be on _one_ element. To "iterate" means use a loop (most of the time). – evolutionxbox Jan 10 '21 at 17:36
  • Why not use jQuery? https://stackoverflow.com/questions/7941931/jquery-tooltip-onclick – Yuma Technical Inc. Jan 10 '21 at 17:46
  • I haven´t thought that this would be so difficult. As I reached 99% of what my tooltips need to do, I thought it would be easier to implement a simple JavaScript or CSS code to show and hide them on click. But it seems nobody has a particular answer to my code. Everything is there, just can´t get the click function running. I also want to avoid that I have to write the HTML again. But perhaps I will go with only CSS solution when nobody can solve this, like here [link](https://www.bit01.de/blog/css3-tipps-klickbare-tooltips-mit-css3/) as CSS makes more sense to me... – Artan Jan 10 '21 at 17:55

1 Answers1

0

This question got answered in a similar question I made.

Here the link to the question also in stackoverflow

There you will find deeper insights and possible solutions for tooltips via JavaScript or :hover pseudo class.

Artan
  • 63
  • 13