[jQuery] Re: [tooltip] Looping and variable tooltip setup

[spinnach]

derek,
i'm not sure if there are any speed advantages (in both cases jquery has 
to loop through all divs on the page to find the ones you need - either 
by class or by id, so there probably is none) but by using classes your 
keeping your html cleaner..

as a rule, things that repeat on a page or through out the site, and 
have the same purpose, should use classes, and things which are specific 
and more important should use id's.. or at least, that's the how i do it 
:)..

dennis.

derek wrote:

dennis,

Thanks for the help, both of your examples work great.
I also tried substituting in a class 'tt' in place of the individual
ids and that seems to work good as well.
Is there any speed advantage to this method?  I'll probably end up
using this method instead as it seems more elegant.

Thanks again!

Derek R.

On Feb 23, 8:16 am, spinnach <[EMAIL PROTECTED]> wrote:
derek,

i haven't thoroughly examined how bodyHandler works but i think
something like this should work, provided that your html structure won't
change:

$('div[id^=tt]').tooltip({
   bodyHandler: function(){
     return $(this).next().html();
   }

});

if your html structure will change, you could do something like this:

$('div[id^=tt]').tooltip({
   bodyHandler: function(){
     var id = 'tb' + this.id.substr(2);
     return $('#'+id).html();
   }

});

although i'd recommend using classes instead of id's, to avoid
cluttering your html (and then using something in the lines of the first
example, only instead of $('div[id^=tt]') you could use $('div.tt'), and
of course, putting a tt class on the 'item' divs ) ..

dennis.

derek wrote:

Greetings,
After evaluating several different javascript tooltip libraries I've
settled on the jQuery 'Tooltip' plug-in, however I'm having one minor
issue getting something working.
I'm trying to setup a series of pairs of tooltip triggers/bodies using
a generic naming system so that it's easily enable through CGI
scripts.
To test I have two sets of triggers/bodies that look like this:
        <table>
            <tr>
                <td>
                    <div id="tt0">Item 1</div>
                    <div id="tb0" class="tb">Item 1's Tooltip</div>
                </td>
                <td>
                    <div id="tt1">Item 2</div>
                    <div id="tb1" class="tb">Item 2's Tooltip</div>
                </td>
            </tr>
        </table>
Where the <div> with the 'tt?' ids are the tooltip triggers and the
'tb?' ids are the associated tooltip bodies.
Now, if for each pair I add the following jQuery script the results
are fine:
$(function() {
    $("#tt0").tooltip({bodyHandler: function(){return $
("#tb0").html();}});
    $("#tt1").tooltip({bodyHandler: function(){return $
("#tb1").html();}});
});
I get the appropriate tooltip bodies when the mouse hovers over the
triggers.
The pages that will be generated however will have dozens of tooltips
and to have one of these for each would end up causing a lot of
overhead in the output, so to alleviate this output overhead I'd like
to have a loop that will dynamically perform that.  Currently I have
the following code:
$(function() {
    var tc = $('[id^=tt]').size();
    for (var i = 0; i < tc; i++) {
        var tt = "#tt" + i;
        var tb = "#tb" + i;
        $(tt).tooltip({bodyHandler: function(){return $
(tb).html();}});
    }
});
This does create tooltips for the two triggers, however both of them
have the tooltip body from 'tb1', I've verified that the values for
the 'tt' and 'tb' variables are correct during the loop, and
the .text() values from the bodies also show the correct values.
Is there something I'm missing from this, or am I going about this the
wrong way?
I would appreciate any comments or suggestions!
Thanks,
Derek R.