छवि पर टूलटिप

132

मैं टूलटिप का उपयोग कर रहा हूं। लेकिन मैं चाहता हूं कि छवि टैग पर, जैसे जब मैं छवि को माउस करता हूं तब टूलटिप को काम करना चाहिए। मैंने कोशिश की है लेकिन छवि टैग पर मेरे लिए काम नहीं कर रहा है।

html image tooltip

— user1528786
स्रोत

क्या भाषा? HTML, C #, Java, ...?

— मथियास

4

का उपयोग करें document.getElementById('theImage').title='tooltip text'।

— Jay

stackoverflow.com/questions/36275678/how-to-create-a-tooltip

— पूजा केदार

समस्या यह है कि <img> टैग स्वयं समापन है, इसलिए आप इसके अंदर कोई अन्य तत्व नहीं जोड़ सकते।

— जस्टिन

351

आप इसके लिए छवि के मानक HTML शीर्षक विशेषता का उपयोग कर सकते हैं:

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>

— मथायस
स्रोत

3

मैं टूलटिप्स ऑन माई वर्किंग प्रोजेक्ट हूं जो 100% वर्किंग है

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img{
width:90px}
</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>

<p>Note that the position of the tooltip text isn't very good. Check More Position <a href="https://www.w3schools.com/css/css_tooltip.asp">GO</a></p>

</body>
</html>

स्निपेट का विस्तार करें

— परेश शियाल
स्रोत

0

जावास्क्रिप्ट का उपयोग करते हुए, आप पृष्ठ पर सभी छवियों के लिए टूलटिप्स सेट कर सकते हैं।

<!DOCTYPE html>
<html>
    <body>
    <img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
    <img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
     <script>
     //image objects
     var imageEls = document.getElementsByTagName("img");
     //Iterating
     for(var i=0;i<imageEls.length;i++){
        imageEls[i].title=imageEls[i].alt;
        //OR
        //imageEls[i].title="Title of your choice";
     }
        </script>
    </body>
</html>

स्निपेट का विस्तार करें

— सुषमा रेड्डी
स्रोत

-6

आप एक छवि के लिए टूलटिप बनाने के लिए निम्न प्रारूप का उपयोग कर सकते हैं।

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>

— हशी सुदलर
स्रोत

3

आप वास्तव में काम करने के लिए कुछ CSS गायब कर रहे हैं। यदि आप .tooltip: hover .tooltiptext और स्थिति .tooltiptext को ठीक से जोड़ते हैं, तो यह टूलटिप को दिखाने का एक अच्छा तरीका हो सकता है, जहाँ आपकी प्रस्तुति पर अधिक नियंत्रण हो।

— LKM

वे शायद w3 स्कूलों को बंद कर रहे हैं: w3schools.com/css/css_tooltip.asp मैं मानता हूं कि यह एक अधूरा समाधान है, केवल उन लोगों के लिए लिंक प्रदान करता है जो इस मार्ग पर जाना चाहते हैं।

— जस्टिन