(This is addressed to Jörn, but everyone should please feel free to 
comment.)

Jörn,

I know you're probably quite busy with the autocomplete plugin, but if 
you have a minute, I'd like to suggest a tweak to your tooltip plugin. 
There is a not-yet documented option called bodyHandler(), which I'm 
finding quite useful, but which would be nicer still with a slight change.

I have links in a calendar control that look like this:

<a class="event-link"
    href="/events/2007/04/27/"
    title="Two events for April 27"
    rel="Two events for April 27"
    rev='[{name: "Martin Sexton", time: "2:30 PM"},
          {name: "Elvis Costello", time: "7:00 PM"}]'
 >April 27, 2007</a>

which I'm tooltipping (?) with this code:

$("a.event-link").Tooltip({
     showURL: false,
     delay: 0,
     extraClass: "mini-event",
     bodyHandler: function() {
         var st = "<h3>" + this.rel + "</h3>";
         var events = eval(this.rev);
         if (events.length > 0) {
             st += "<table>";
             for (var i = 0; i < events.length; i++) {
                 st += "<tr><td>" + events[i].name + "</td><td>"
                    + events[i].time + "</td></tr>";
             }
             st += "</table>";
         } else { // shouldn't happen, but...
             st += "<p><em>No events found</em></p>";
         }
         return st;
     },
     fixPNG: true
});

(I know, I know, I have to learn the Metadata plugin!)

The rel attribute is a copy of the title attribute because I need to use 
the title attribute inside the body handler, but the plugin has stripped 
it out before my body handler gets called:

title = $(this).getAndSetAttr('title', '');
                
if ( this.tSettings.bodyHandler ) {
     helper.title.hide();
     helper.body.html( this.tSettings.bodyHandler.call(this) ).show();
     // ...

I also don't have access to the helper.title section, because I have no 
handle to the helper object.  If these could be passed into the body 
handler, then my HTML could be cleaner, and my code a bit tighter.  I 
think it would be more generally useful, too.  I'm suggesting just that 
that last line be replaced with:

     helper.body.html( this.tSettings.bodyHandler.call(this, helper,
                                                    title) ).show();

Then my code could be a bit more simple:

$("a.event-link").Tooltip({
     showURL: false,
     delay: 0,
     extraClass: "mini-event",
     bodyHandler: function(helper, title) {
         helper.title.html(title).show();
         var st = "";
         var events = eval(this.rev);
         if (events.length > 0) {
             st += "<table>";
             for (var i = 0; i < events.length; i++) {
                 st += "<tr><td>" + events[i].name + "</td><td>"
                    + events[i].time + "</td></tr>";
             }
             st += "</table>";
         } else { // shouldn't happen, but...
             st += "<p><em>No events found</em></p>";
         }
         return st;
     },
     fixPNG: true
});

Is there some good reason that I'm  missing not to supply these objects 
to the bodyHandler?

Thanks for all your great tools,

   -- Scott

Reply via email to