HTML तालिका में कक्षों के लिए टूलटिप्स (कोई जावास्क्रिप्ट नहीं)

Question

क्या कोई जावास्क्रिप्ट वाले तालिका कक्षों के लिए टूलटिप्स होना संभव है। इसका उपयोग नहीं कर सकते धन्यवाद?

Answer 1

क्या आपने कोशिश की है?

<td title="This is Title"> 

अपने यहाँ ठीक काम कर रहा फ़ायरफ़ॉक्स वी 18 (अरोड़ा), इंटरनेट एक्सप्लोरर पर 8 & गूगल क्रोम वी 23x

Answer 2

हां। आप खराब उपयोगिता के साथ सेल तत्वों पर title विशेषता का उपयोग कर सकते हैं, या आप सीएसएस टूलटिप्स (कई मौजूदा प्रश्न, संभवतः इस के डुप्लिकेट) का उपयोग कर सकते हैं।

Answer 3

आप सीएसएस और होवर छद्म-संपत्ति का उपयोग कर सकते हैं। यहां एक simple demo है। यह निम्नलिखित सीएसएस का उपयोग करता है:

a span.tooltip {display:none;} 
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;} 

ध्यान दें कि पुराने ब्राउज़र के पास सीमित समर्थन है: होवर।

Answer 4

मुदस्सर बशीर द्वारा उच्चतम रैंक जवाब "शीर्षक" का उपयोग कर विशेषता लिए सबसे आसान तरीका लगता है ऐसा करें, लेकिन यह आपको कम नियंत्रण देता है कि टिप्पणी/टूलटिप कैसे प्रदर्शित होता है।

मैंने पाया कि कस्टम टूलटिप वर्ग के लिए क्रिस्टोफ़ का उत्तर टिप्पणी/टूलटिप के व्यवहार पर अधिक नियंत्रण प्रदान करता है। चूंकि प्रदत्त डेमो में एक तालिका शामिल नहीं है, प्रश्न के अनुसार, यहां a demo that includes a table है।

ध्यान दें कि अवधि के मूल तत्व (इस मामले में) के लिए "स्थिति" शैली को "रिश्तेदार" पर सेट किया जाना चाहिए ताकि टिप्पणी तालिका के सामग्रियों को प्रदर्शित होने पर चारों ओर धक्का न दे। इसे समझने में मुझे थोड़ी देर लग गई।

#MyTable{ 
 
    border-style:solid; 
 
    border-color:black; 
 
    border-width:2px 
 
} 
 

 
#MyTable td{ 
 
    border-style:solid; 
 
    border-color:black; 
 
    border-width:1px; 
 
    padding:3px; 
 
} 
 

 
.CellWithComment{ 
 
    position:relative; 
 
} 
 

 
.CellComment{ 
 
    display:none; 
 
    position:absolute; 
 
    z-index:100; 
 
    border:1px; 
 
    background-color:white; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    border-color:red; 
 
    padding:3px; 
 
    color:red; 
 
    top:20px; 
 
    left:20px; 
 
} 
 

 
.CellWithComment:hover span.CellComment{ 
 
    display:block; 
 
}

<table id="MyTable"> 
 
    <caption>Cell 1,2 Has a Comment</caption> 
 
    <thead> 
 
    <tr> 
 
     <td>Heading 1</td> 
 
     <td>Heading 2</td> 
 
     <td>Heading 3</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr></tr> 
 
     <td>Cell 1,1</td> 
 
     <td class="CellWithComment">Cell 1,2 
 
     <span class="CellComment">Here is a comment</span> 
 
     </td> 
 
     <td>Cell 1,3</td> 
 
    <tr> 
 
     <td>Cell 2,1</td> 
 
     <td>Cell 2,2</td> 
 
     <td>Cell 2,3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 5

क्या BioData41 जोड़ा का एक विकास ...

प्लेस क्या सीएसएस शैली में इस प्रकार

 <style> 

     .CellWithComment{position:relative;} 

     .CellComment 
     { 
      visibility: hidden; 
      width: auto; 
      position:absolute; 
      z-index:100; 
      text-align: Left; 
      opacity: 0.4; 
      transition: opacity 2s; 
      border-radius: 6px; 
      background-color: #555; 
      padding:3px; 
      top:-30px; 
      left:0px; 
     } 
     .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;} 
</style> 

फिर, इस तरह उपयोग:

 <table> 
      <tr> 
       <th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th> 
       <th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th> 
       <th>Opened</th> 
       <th>Event</th> 
       <th>Severity</th>   
       <th>Id</th> 
       <th>Component Name</th> 
      </tr> 
      <tr> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
     </table>