CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andy Andy
Andy Andy

Reputation: 299

jQuery - Make tooltip get 2 img alts

Let's say I want to use images in my table headers.

Every image has assigned alt to it.

How can I make get this jQuery code to show tooltip with alt of row and column?(Row:Column format)

At this moment it looks like this:

http://jsfiddle.net/G38nx/33/

Code:

$('td').each(function () {
    var myIndex = $(this).index() + 1;
    var myTitle = $(this).closest('tr').find('th').text();
    var myTitle2 = $(this).closest('td').find('th').text();

    myTitle2 += $('td:first-child th:nth-child(' + myIndex + ')').children("img").attr("alt");
    $(this).attr('title', myTitle2);
    myTitle += ":";
    myTitle += $('tr:first-child th:nth-child(' + myIndex + ')').children("img").attr("alt");
    $(this).attr('title', myTitle);

    $(this).tooltip({
        show: false,
        hide: false
    });
});

Upvotes: 1

Views: 103

Answers (2)

Don Srinath
Don Srinath

Reputation: 1593

Ok, easiest way to do this is have your title element blank. Have content already generated on the page inside a hidden div. Then when you initialize tool-tip in jQuery provide id of hidden help content.

Step 1

<div title=''  id="x">Show tool tip over this element</div>

Step 2

<div style="visibility:hidden"> 
<div id="y">What ever the content you want to be shown as tool tip</div> 
</div>

Step 3

$( "#x" ).tooltip({ track: true, content:function() {  return $( '#y' ).html(); } });

Upvotes: 0

Maen
Maen

Reputation: 10698

What about this :

$('td').each(function () {
    var myIndex = $(this).index() + 1;

    //I took the first sibling th, and took its alt attribute
    var myTitle += $(this).siblings('th').children("img").attr("alt");
    myTitle += ":";
    myTitle += $('tr:first-child th:nth-child(' + myIndex + ')').children("img").attr("alt");
    $(this).attr('title', myTitle);

    $(this).tooltip({
        show: false,
        hide: false
    });
});

Check this Fiddle for a working example!

Upvotes: 2

Related Questions