Как добавить всплывающую подсказку в «td» с помощью jquery?

Question

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

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

Я пытался:

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

, где я убедился, что я использую "td" как "это".

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

Answer 1

$(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 2

Возможно, вы захотите взглянуть на http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

$('#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 - идентификатор таблицы

td: nth-child (5) - столбец 5

Answer 4

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

td: nth-child (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 5

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

Answer 6

Если вы действительно хотите поместить эти всплывающие подсказки в ячейки таблицы, а не в заголовки таблиц - там, где они будут иметь гораздо больший смысл - пожалуйста, рассмотрите возможность размещения их в содержимом ВНУТРИ ячейки таблицы, где это гораздо более значимо .