Hi Karl,
Thanks for your comprehensive reply! I'll give that a go as soon as I
can. I need the tooltip for TDs rather than links but that shouldn't
be hard to modify I hope.
Here was my attempt at modifying the original script by the way, which
gave very, very strange results. :)
$(document).ready(function(){
xOffset = 10;
yOffset = 20;
var t;
$(".adminTable").hover(function(e){
var $tgt = $(e.target);
if($tgt.hasClass("tooltip")) {
t = $tgt.attr("title");
$tgt.attr("title", "");
$("body").append("<p id='tooltip'>"+ t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
}
},
function(e){
var $tgt = $(e.target);
$tgt.attr("title", t);
$("#tooltip").remove();
});
});
Frank.
On Dec 5, 2:58 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> 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 Swedbergwww.englishrules.comwww.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...
>
> > 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.
