Feeling the jQuery love

I’ve started to use jQuery on the cur­rent project I’m work­ing on and I really love it so far. It’s a lot eas­ier to grasp than I expected and is very light­weight for such a pow­er­ful framework.

When the site is done I’ll post a link to it. I’ve used jQuery for tabbed forms, form data manip­u­la­tion and updat­ing of page text and more. There’s one thing I didn’t find out how to do with it or if even a plu­gin exists for it and it’s a spe­cific kind of tooltips imple­men­ta­tion. jQuery does have tooltip plu­g­ins but none I found can eas­ily take the text from ANY ele­ment in a page and show it in the tooltip when mou­s­ing over another element.

The con­tents of my tooltips was long and needed to be for­mat­ted so I placed it in hid­den divs with a class named “descrip­tions” and those divs are hid­den by the script so avail­able as linked ref­er­ences if JS is off. I’m really surpised I couldn’t find a sim­i­lar imple­men­ta­tion for jQuery. The tooltips script I used is the one from Walter Zorn. If any­one knows of one that works sim­i­larly (needs to load con­tent from any ID’d ele­ment on the page) then please share! :-) The one thing I do not like about Zorn’s script is that it relies on the onmouseover and onmouse­out attrib­utes and I would like to keep the code cleaner.

6 Responses to Feeling the jQuery love
  1. somnamblst
    June 16, 2008 | 12:06 pm

    I ened up going with hov­er­In­tent & using CSS to style
    my “tool tip” as I found it be be much more flexible.

    http://​cherne​.net/​b​r​i​a​n​/​r​e​s​o​u​r​c​e​s​/​j​q​u​e​r​y​.​h​o​v​e​r​I​n​t​e​n​t​.​h​tml

  2. Stéphane
    June 16, 2008 | 1:06 pm

    HoverIntent just delays the fir­ing up of events. I fail to see how it addresses my query about a jQuery method or plu­gin that would load the tooltip text from another ID’d ele­ment on the page. Any point­ers on that? Thanks for the tip about hov­er­In­tent though.

  3. Rey Bango
    June 16, 2008 | 8:06 pm

    @Stéphane: The jQuery ClueTip plu­gin already pro­vide much of that func­tion­al­ity. http://​plu​g​ins​.learn​ingj​query​.com/​c​l​u​e​t​ip/

    BTW, glad to see another CF devel­oper using jQuery.

    Rey — jQuery Team

  4. Stéphane
    June 17, 2008 | 8:06 am

    Thanks very much for that Rey. Care to com­ment on how ClueTip com­pares to this one?
    http://​bassis​tance​.de/​j​q​u​e​r​y​-​p​l​u​g​i​n​s​/​j​q​u​e​r​y​-​p​l​u​g​i​n​-​t​o​o​l​t​ip/

    That’s the one I imple­mented for now but I didn’t have time to look at ClueTip yet.

  5. Rey Bango
    June 17, 2008 | 8:06 am

    Both plu­g­ins are main­tained by jQuery team mem­bers and are excel­lent choices. You can’t go wrong either way.

  6. somnamblst
    June 18, 2008 | 1:06 pm

    The main rea­son I abanadoned any of the tooltip exam­ples and used the demos on the hov­er­In­tent tute with jQuery’s native make­Tall makeShort is because I was able to use CSS to style my “faux gigan­tic tooltips” to be any size, con­tain any amount of con­tent AND to expand down rather than up. HoverIntent just keeps it from being spas­ti­cally jumpy and seem smoother with rapid on off mouse movements.

    So I ended up with an expand­ing hid­den div that was 245 pix­els deep

    $(document).ready(function(){
    jQuery(“#demo2 li”).hoverIntent(makeTall,makeShort);

    }); /​/​close document.ready

    func­tion make­Tall(){ jQuery(this).animate({“height”:245},245).html;}
    func­tion makeShort(){ jQuery(this).animate({“height”:40},245).html;}

Leave a Reply

Wanting to leave an <em>phasis on your comment?