Click to toggle dark text on white

wTooltip: Lightweight, Flexible jQuery Tooltip Plugin

Download: Uncompressed Version | Compressed Version

Bookmark and Share Wayfarer Tooltip for #jQuery
  1. Basics
  2. Inserting Content Into Tooltip
  3. Styling the Tooltip
  4. Styling Externally
  5. Filling via AJAX
  6. Degrading for IE6 or below
  7. Appending the Tooltip
  8. Advanced Examples
  9. Index of All Options
  10. Comments or Questions

Needs jQuery to work. Released under the MIT license.

Basics: The default behavior of the wTooltip is the conversion of title attribute messages into the tooltip.  Activating this behavior is very simple, and works like this example:

 $("a").wTooltip(); 


This will make all "a" elements on the page have the tooltip behavior, if they have a title attribute.

Sample:

link1 link2 link3

Customizing Content: Tooltips may also be created by defining the content property:

$("#block p").wTooltip({content: "Hello World"});


This will make all paragraphs within #block have a tooltip reading "Hello World".  One thing that should be noted about the content property, is that if you do not set it, the tooltip will revert to looking for the title attribute.  Therefore, if like in the advanced examples later, the content is set manually through the callBefore property, the content must be set to either to a string, or to true.

Sample:

Custom Styling


Styling Externally: If you wish to style a tooltip externally, you may pass it a classname or an id:

$("#block-whatever p").wTooltip({
    content: "Just another tooltip",
    id: "myId",
    className: "myClass",
    style: false//remove all pre-set inline styles
});


Note that the JavaScript convention of className instead of class is used.  Note that if you are using a tooltip trigger for a large group of objects (such as the "a" in the first sample), there will be only one tooltip generated for the entire group, so you may still identify it with "id" instead of "className", since it will be unique.

AJAX: The wTooltip is designed especially for maximum flexibility in its application.  The "content" property may easily be filled from any source, such as an AJAX call (with some light programming of course).  However, there is an included AJAX method that will make a simple query a bit faster:

$("#block-whatever p").wTooltip({
    content: "Yet another tooltip",
    ajax: "/my/location.php?query=fun"
});


Note that you must manually include any query variables you need (?query=fun).  This is much simpler than having a second property for these variables IMO.

By default, the tooltip will be offset 1 pixel to the right, and 10 pixels to the bottom.  This may be changed by the offsetY and offsetX properties:

$("#block3 p").wTooltip({
    content: "Offset tooltip",
    offsetY: 15,
    offsetX: -15
});


Sample:

Offset tooltip


We all wish IE6 would die:  Although the tooltip appears to work in IE6 in every situation I have tested, it is possible that it will eventually fail in IE6 due to its funny interpretation of absolute positioning, or something else.  There may be some unusual CSS situations that I have not anticipated.  If you don't feel like debugging your CSS just to make a tooltip work in IE6, you may choose the "degrade" option, which strips any HTML from the "content", and expresses the tooltip as a title attribute message instead of a tooltip.  This will allow the message to still be seen, if not as well as in the more standard browsers:

$("#block-whatever p").wTooltip({
    content: "Silly IE",
    degrade: true
});


Appending: There is one other property that you may never need, "appendTip".  By default, the tooltip is appended to the body.  Since it depends on the position of the mouse, this should normally be all you need.  If for some reason you need it to be appended somewhere else, you may set this property as a CSS selector, which will be passed to jQuery to determine where to append the tip:

$("#block-whatever p").wTooltip({
    content: "Another tooltip",
    appendTip: "#my-special-div"
});


Now, the tip will by appended to #my-special-div instead of the body.


I built this plugin because I was sad to see how poor the quality of existing jQuery tooltip plugins was. It is super fast, and should meet all of your needs. The entire uncompressed script is barely over 200 lines of code.  Compressed it is currently only 3K.

Advanced Examples and Functionality >>

Download: Uncompressed Version | Compressed Version

Most Recent Blog Post: jQuery Mapbox Updated

Privacy Policy | Click Here | jQuery Plugins by Wayfarer | Freelance Jobs Available | Random JavaScript Code Samples | Share a Random Link | JavaScript Jobs