Hi Frank,
Just for kicks, I cranked out my own very simple tooltip script. It
isn't a plugin. Yet. But it gets the job done.
Basically, it binds the event listeners to a table (since that's what
you said you had) and uses event delegation to look for any links
within the table. The tooltip content comes from the title attribute.
It assumes that you don't have elements nested more than one deep
within a link, so it would work for <a href="#"><span>yes</span></a>
but not for <a href="#"><span><strong>no</strong></span></a>.
Hopefully it'll make sense to you, but if it doesn't, let me know and
I'll try to explain whatever you're having problems with.
Here is a link to a demo page:
http://test.learningjquery.com/very-simple-tooltip.html
And here is the code:
$(document).ready(function() {
var $vsTip = $('<div id="vs-tip"></div>').css('opacity',
'0.6').hide().appendTo('body');
var tgt,
vsTip = {
link: function(e) {
var t = e.target.nodeName === 'A' ?
e.target :
e.target.parentNode.nodeName === 'A' && e.target.parentNode;
return t || false;
},
xOffset: 10,
yOffset: 20,
contents: ''
};
$('table').mouseover(function(event) {
if (vsTip.link(event)) {
tgt = vsTip.link(event);
vsTip.contents = tgt.title;
tgt.title = '';
$vsTip.css({
left: event.pageX + vsTip.xOffset,
top: event.pageY + vsTip.yOffset
}).html(vsTip.contents).show();
}
}).mouseout(function(event) {
if (vsTip.link(event)) {
tgt = vsTip.link(event);
tgt.title = vsTip.contents;
$vsTip.hide();
}
}).mousemove(function(event) {
if (vsTip.link(event)) {
$vsTip.css({
left: event.pageX + vsTip.xOffset,
top: event.pageY + vsTip.yOffset
});
}
});
});
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Dec 5, 2008, at 5:36 AM, Frank wrote:
Hi there,
I've got a page with a very big table (unfortunately breaking it up
isn't an option), and I wanted to use the handy tooltip script here:
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
This results in just over 2,000 cells with tooltips, and such over
2,000 listeners. When I refresh the page, I get an "Unresponsive
Script" error in Firefox, which isn't suprising.
Could someone suggest a way I could modify the above script to use
fewer listeners? Maybe through event delegation? I'm still quite new
to jQuery, so any advice is welcome!
Frank.
