Как добавить подсказку в «td» с jquery?

Question

Мне нужно добавить всплывающую подсказку/alt к элементу «td» внутри моих таблиц с помощью jquery.

Может кто-нибудь помочь мне?

Я пробовал:

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

где я проверил, что я использую «ТД» как «это».

** Редактировать: ** Я могу захватить элемент «td» с помощью команды «alert», и она сработала. Поэтому по какой-то причине функция «tip» не работает. Кто-нибудь знает, почему это было бы?

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

Если вы действительно хотите, чтобы положить эти подсказки на ваших ячеек таблицы и а не заголовки ваших таблиц - где они будут иметь гораздо больше смысла - пожалуйста, подумайте о том, чтобы разместить их в содержимом INSIDE в ячейках таблицы, где это гораздо более значимо.

Answer 5

grdList - идентификатор таблицы

тд: п-й ребенок (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 - идентификатор таблицы

тд: п-й ребенок (5) - колонки 5