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.
