CODEWITHSUNDEEP
jqueryhtml
SpoiledTechie.com
SpoiledTechie.com

Reputation: 10725

How to add a Tooltip to a "td" with jquery?

I need to add a tooltip/alt to a "td" element inside of my tables with jquery.

Can someone help me out?

I tried:

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

where I have verified that I am using the "td" as "this".

**Edit:**I am able to capture the "td" element through using the "alert" command and it worked. So for some reason the "tip" function doesn't work. Anyone know why this would be?

Upvotes: 8

Views: 50907

Answers (6)

Avi
Avi

Reputation: 41

grdList - table id

td:nth-child(5) - column

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

Upvotes: 1

Avi
Avi

Reputation: 41

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

td:nth-child(5) - column 5

Upvotes: 3

nickf
nickf

Reputation: 546085

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

a better way might be to put title attributes in your HTML. That way, if someone has javascript turned off, they'll still get a tool tip (albeit not as pretty/flexible as you can do with jQuery).

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

and then use this code:

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

Upvotes: 25

Kent Brewster
Kent Brewster

Reputation: 2520

If you really do want to put those tooltips on your table cells and not your table headers--where they'd make much more sense--please consider putting them on the content INSIDE the table cells, where it's much more meaningful.

Upvotes: -1

John Boker
John Boker

Reputation: 83709

you might want to have a look at http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Upvotes: 13

John Boker
John Boker

Reputation: 83709

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

Upvotes: 1

Related Questions