如何使用jquery將工具提示添加到「td」？

Question

我需要添加一個工具提示/ ALT到我的表內的「td」元素與jquery。

有人可以幫我嗎？

我想：

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

，我已經驗證了我現在用的是 「TD」 「本」。

**編輯：**我可以通過使用「alert」命令捕獲「td」元素，它工作。所以出於某種原因，「提示」功能不起作用。任何人都知道爲什麼會這樣？

Answer 1

你可能想看看http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 2

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

更好的方法可能是將title屬性放入HTML中。這樣，如果有人關閉了JavaScript，他們仍然會得到一個工具提示（儘管不像使用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 - 表ID

TD：第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 - 表ID

TD：第n個孩子（5） - 列5