[jQuery] Tooltip tweak
[jQuery] Tooltip tweak
(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 += "<em>No events found</em>
";
}
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 += "<em>No events found</em>
";
}
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