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

Question

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

Answer 1

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

<td title="This is Title">

फ़ायरफ़ॉक्स वी 18 (अरोरा), इंटरनेट एक्सप्लोरर 8 और Google क्रोम वी 23x पर यहां काम करना ठीक है

Comments

यह है, लेकिन यह वास्तव में धीमा है :(

Answer 2

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

Answer 3

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

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

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

#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 4

आप css और: hover छद्म संपत्ति का उपयोग कर सकते हैं। यहाँ एक सरल डेमो है । यह निम्नलिखित सीएसएस का उपयोग करता है:

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

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

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>

Comments

क्या फर्क पड़ता है?

— डैनियल सी। सोबरल

Answer 6

if (data[j] =='B'){
    row.cells[j].title="Basic";
}

जावा स्क्रिप्ट में सशर्त रूप से डेटा के मूल्य की तुलना करके शीर्षक जोड़ना। तालिका जावा स्क्रिप्ट द्वारा गतिशील रूप से बनाई गई है।