1

I created tooltips to substitute the default browser "TITLE" bubble. I've read a lot of threads and all of them suggests I should remove title temporarily on mouseover and put it back on later. I am trying to do exacly that, but I am failing to. Here is my code and the reason why I use jQuery live is because I want the effect to apply to dynamically added elements later:

tooltip : {
    activate : function(selector){
        $(selector).each(function(){
            $(selector).live('mouseover',function(e){
                tooltip.init(this,true,e);
            });
            $(selector).live('mouseout',function(e){
            tooltip.init(this,false,e);
            });
        });
    },
    init : function(elem,show,e){
        var title = $(elem).attr('title');
        this.addTip(elem,show,title);

        ...
    },
    addTip : function(elem,show,title) {
        var code = '<div class="tooltip-wrapper">'+title+'</div>';
        if(show) {
            $(elem).after(code);
            setTimeout('$(".tooltip-wrapper").fadeIn("slow")',500);
        }
        else {
            $(".tooltip-wrapper").remove();
        }
    }
}

I call this script like this:

tooltip.activate(selector);

Another problem I have is that it gives me HIERARCHY_REQUEST_ERR: DOM Exception 3 error if I try this tooltip.activate("*");, but it works if I use input as a selector.

Any input will be much appreciated :-)

Sthe
  • 2,575
  • 2
  • 31
  • 48
  • You're trying to append something to `document`. See http://stackoverflow.com/questions/1256394/what-exactly-can-cause-an-hierarchy-request-err-dom-exception-3-error – georg Feb 11 '12 at 10:17
  • You are refering to the `HIERARCHY_REQUEST_ERR: DOM Exception 3` error? I'll correct that. – Sthe Feb 11 '12 at 10:27

2 Answers2

2

I'll just point to a couple issues:

  • Using live inside each defeats the idea of live. each loops over existing elements, not future elements.
  • But in any case, the way you're doing it is wrong. You should drop the each (in activate), because live already applies to multiple elements. So in your case, if you have N elements, you'll be adding the same event listener N times.
  • * applies to all the elements, which could be very inefficient. How about trying [title] (applies to elements that have a title attribute)
  • If you remove the title temporarily on hover, then the title is meaningless (because it only appears on hover). If you're creating an improved tooltip based on the title attribute just read the title attribute when you first encounter it and use it for your tooltip
  • You should probably use mouseenter and mouseleave instead of mouseover and mouseout. If an element with a title has child elements you want the tooltip to keep showing when the mouse goes in/out child elements.
ori
  • 7,817
  • 1
  • 27
  • 31
1

how about something like this?

addTip : function(elem,show,title) {
        var code = '<div class="tooltip-wrapper">'+title+'</div>';
        if(show) {

            $(elem).after(code);
            $(elem).removeAttr('title');
            setTimeout('$(".tooltip-wrapper").fadeIn("slow")',500);
        }
        else {
            $(".tooltip-wrapper").remove();
            $(elem).attr('title',title);
        }
    }
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378