Easy Hover or Tooltip Script

Use this when you want a tooltip-like effect when one of a group of many elements is hovered over. You will also need a .png or a .gif for the background of the tooltip. Or, you could just be creative with your CSS.

jQuery(".hoverElement").hover(function(b) {
    var offsetLeft = jQuery(this).offset().left;
    var offsetTop = jQuery(this).offset().top;
    jQuery("div#" + jQuery(this).attr("rel")).show("fast").offset({
        top: offsetTop - 18,
        left: offsetLeft + 15
    });
}, function() {
    jQuery("div#" + jQuery(this).attr("rel")).hide("fast")
    });

If you have multiple elements that require the effect, give them all the same class. For each hover element, you will need a hidden element with a unique id that contains the tooltip content. In the “rel” tag of each hover element, put the id of the corresponding hidden element, minus the “#”. This can probably be condensed to use only one hidden element, but I haven’t gotten around to simplifying yet.

Adjust the offset as needed.

This entry was posted in jQuery. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>