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

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

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

Я старался:

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

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

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

jquery html

03.10.2008 08:00

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

49 330

Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

$(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();
}

можешь уточнить? что происходит? есть ли сообщения об ошибках? у вас действительно есть функция под названием "подсказка"?

— 03.10.2008 08:10

03.10.2008 08:03

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

03.10.2008 08:05

Ответ принят как подходящий

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

03.10.2008 08:13

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

03.10.2008 08:20

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) + '...');
        }
    }
});

14.04.2010 11:25

$('#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

Это мне очень помогло, однако имеет смысл использовать в заголовке $(this).text() вместо $(this).html(), особенно. если в ваших ячейках есть гиперссылки.

— 07.05.2012 12:54

14.04.2010 11:31