Click to toggle dark text on white

jQuery Tooltip Examples (Advanced)

Download: Uncompressed Version | Compressed Version

  1. Main Page
  2. Advanced Examples
  3. Index of All Options
  4. Comments or Questions

More Complete Documentation Coming soon.

Callbacks (simple): The tooltip also has a callBefore, and callAfter feature, that allows you to execute custom code before the tip is shown, or directly before it is hidden.  This code may be any chunk of JavaScript or jQuery, and allows for advanced functionality, such as recurring AJAX calls, or any effect that you may think of.

Here is a counter that increments each time the tooltip is activated:

var n = 1;
    content: "Rollover #1",
    id: "tooltip1",
    callBefore: function() {
       $("#tooltip1").html("Rollover #" + n);


Starting at 1

Note that you don't actually need to pass an ID to the tooltip in order to access it via the callback.  This is because the first of three optional callback arguments is the tooltip option.  If you include arguments in your callbacks, the first one will automatically give you access to the tooltip as a native DOM object.  The other thing to note, is that the "content" property needs to be set in order to stop the default action of using title attributes for the message.   This example will do exactly the same as the example above:

var n = 1;
    content: true,
    callBefore: function(tooltip) {
        $(tooltip).html("Rollover #" + n);

There are additional parameters to the callbacks that I will discuss later (more documentation coming soon).

     content: "Watch this!",
    fadeIn: 600,
     fadeOut: "slow"


Fading Tooltip

Delaying when the tooltip is shown/hidden
: The tooltip doesn't necessarily need to show up immediately.  Because you may want to delay when it shows up (or is hidden), I created delay, and timeout properties.

     content: "Delayed Reaction",
     delay: 400,
     timeout: 1200


A slower tooltip

I may document more of the features in greater detail at some point, but for now, you may look at the Options Reference for all of the default options, which can each be changed as desired.

Index of All Tooltip Options >>

<< Back to Main Page

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