मेरे टूलटिप्स को क्लिक पर दिखाने और छिपाने की कोशिश की जा रही है। मैं इसे पहले टूलटिप के साथ करने में कामयाब रहा लेकिन यह दूसरों के लिए काम नहीं करता है।

मुझे पता है कि समस्या 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, 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>

आपकी सहायताके लिए धन्यवाद!

0
Artan 10 जिंदा 2021, 19:29
1
एक id अद्वितीय माना जाता है। इसके बजाय सभी तत्वों का चयन करने के लिए कक्षा का उपयोग करें document.querySelectorAll('.website-tooltip') और परिणामी तत्वों की सूची पर पुनरावृति करें।
 – 
Chris G
10 जिंदा 2021, 19:32
यहां बताया गया है कि चयनित वस्तुओं पर कैसे पुनरावृति करें stackoverflow.com/questions/12330086/…
 – 
Ozgur Sar
10 जिंदा 2021, 19:35
शीघ्र प्रतिक्रिया के लिए शुक्रिया। मैं जावास्क्रिप्ट में बहुत अच्छा नहीं हूँ। मुझे आपके कोड का टुकड़ा कहां रखना है और "[...] परिणामी सूची पर पुनरावृति [...]" के साथ आपका वास्तव में क्या मतलब है? धन्यवाद।
 – 
Artan
10 जिंदा 2021, 19:36
ठीक है, यह मेरे लिए बहुत अधिक है। मुझे नहीं पता कि मेरे कोड में इसे कैसे कार्यान्वित किया जाए। क्या आप मदद कर सकते हैं? :/
 – 
Artan
10 जिंदा 2021, 19:40
div id="website-tooltip-container" को कभी भी दोहराया नहीं जाना चाहिए। एक आईडी केवल एक तत्व पर होना चाहिए। "पुनरावृत्ति" का अर्थ है एक लूप (ज्यादातर समय) का उपयोग करना।
 – 
evolutionxbox
10 जिंदा 2021, 20:36

1 उत्तर

सबसे बढ़िया उत्तर

मेरे द्वारा किए गए एक समान प्रश्न में इस प्रश्न का उत्तर मिला।

यहां प्रश्न का लिंक स्टैक ओवरफ्लो में भी है

वहां आपको जावास्क्रिप्ट या :hover छद्म वर्ग के माध्यम से टूलटिप्स के लिए गहन अंतर्दृष्टि और संभावित समाधान मिलेंगे।

0
Artan 1 फरवरी 2021, 16:20