jquery के साथ "td" में टूलटिप कैसे जोड़ें?

Question

मुझे jquery के साथ मेरी तालिकाओं के अंदर एक "td" तत्व में टूलटिप/alt जोड़ने की आवश्यकता है।

क्या कोई मेरी मदद कर सकता है?

मैंने कोशिश की:

var tTip ="Hello world"; 
$(this).attr("onmouseover", tip(tTip)); 

मैं कहाँ सत्यापित किया है कि मैं के रूप में "इस" "td" उपयोग कर रहा हूँ।

** संपादित करें: ** मैं "चेतावनी" कमांड का उपयोग करके "td" तत्व को कैप्चर करने में सक्षम हूं और यह काम करता है। तो किसी कारण से "टिप" फ़ंक्शन काम नहीं करता है। किसी को पता है कि यह क्यों होगा?

Answer 1

आप http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 2

$(this).mouseover(function() { 
    tip(tTip); 
}); 

एक बेहतर तरीका अपने HTML में title गुण डाल करने के लिए हो सकता है। इस तरह, अगर किसी के पास जावास्क्रिप्ट बंद हो गया है, तो उन्हें अभी भी टूल टिप मिलेगी (हालांकि आप jQuery के साथ जितना सुंदर/लचीला नहीं कर सकते हैं)।

<table id="myTable"> 
    <tbody> 
     <tr> 
      <td title="Tip 1">Cell 1</td> 
      <td title="Tip 2">Cell 2</td> 
     </tr> 
    </tbody> 
</table> 

और उसके बाद इस कोड का उपयोग:

$('#myTable td[title]') 
    .hover(function() { 
     showTooltip($(this)); 
    }, function() { 
     hideTooltip(); 
    }) 
; 

function showTooltip($el) { 
    // insert code here to position your tooltip element (which i'll call $tip) 
    $tip.html($el.attr('title')); 
} 
function hideTooltip() { 
    $tip.hide(); 
} 

Answer 3

var tTip ="Hello world"; 
$(this).mouseover(function() { tip(tTip); }); 

Answer 4

पर एक नजर है करने के लिए क्या तुम सच में अपनी मेज कोशिकाओं पर उन टूलटिप्स डाल करने के लिए चाहते हैं, तो चाहते हो सकता है और आपके टेबल हेडर नहीं - जहां वे अधिक समझदारी करेंगे - कृपया उन्हें तालिका कक्षों के अंदर सामग्री पर डालने पर विचार करें, जहां यह अधिक अर्थपूर्ण है।

Answer 5

grdList - तालिका आईडी

टीडी: n वें वाले बच्चे (5) - स्तंभ

$('#grdList tr td:nth-child(5)').each(function(i) { 
    if (i > 0) { //skip header 
     var sContent = $(this).text(); 
     $(this).attr("title", $(this).html()); 
     if (sContent.length > 20) { 
      $(this).text(sContent.substring(0,20) + '...'); 
     } 
    } 
}); 

Answer 6

$('#grdList tr td:nth-child(5)').each(function(i) { 
    if (i > 0) { //skip header 
     var sContent = $(this).text(); 
     $(this).attr("title", $(this).html()); 
     if (sContent.length > 20) { 
      $(this).text(sContent.substring(0,20) + '...'); 
     } 
    } 
}); 

grdList - तालिका आईडी

टीडी: n वें वाले बच्चे (5) - स्तंभ 5