Layout

Feeling the jQuery love

I’ve started to use jQuery on the current project I’m working on and I really love it so far. It’s a lot easier to grasp than I expected and is very lightweight for such a powerful framework.

When the site is done I’ll post a link to it. I’ve used jQuery for tabbed forms, form data manipulation and updating of page text and more. There’s one thing I didn’t find out how to do with it or if even a plugin exists for it and it’s a specific kind of tooltips implementation. jQuery does have tooltip plugins but none I found can easily take the text from ANY element in a page and show it in the tooltip when mousing over another element.

The contents of my tooltips was long and needed to be formatted so I placed it in hidden divs with a class named “descriptions” and those divs are hidden by the script so available as linked references if JS is off. I’m really surpised I couldn’t find a similar implementation for jQuery. The tooltips script I used is the one from Walter Zorn. If anyone knows of one that works similarly (needs to load content from any ID’d element 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 onmouseout attributes and I would like to keep the code cleaner.

6 thoughts on “Feeling the jQuery love”

  1. HoverIntent just delays the firing up of events. I fail to see how it addresses my query about a jQuery method or plugin that would load the tooltip text from another ID’d element on the page. Any pointers on that? Thanks for the tip about hoverIntent though.

    Reply
  2. The main reason I abanadoned any of the tooltip examples and used the demos on the hoverIntent tute with jQuery’s native makeTall makeShort is because I was able to use CSS to style my "faux gigantic tooltips" to be any size, contain any amount of content AND to expand down rather than up. HoverIntent just keeps it from being spastically jumpy and seem smoother with rapid on off mouse movements.

    So I ended up with an expanding hidden div that was 245 pixels deep

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

    }); // close document.ready

    function makeTall(){ jQuery(this).animate({"height":245},245).html;}
    function makeShort(){ jQuery(this).animate({"height":40},245).html;}

    Reply

Leave a comment