The WhatsThis? jQuery plugin is designed to parse out the title attribute of an HTML element and render a small information button beside the element, allowing the user to hover over it and get more information in a tooltip.

As such, the plugin does rely on the jQuery Tooltip Plugin.

As an example, suppose we had a title, which we wanted to provide more information about. We could use the plugin to do this.

A General Heading

Try hovering over the code and see what happens. You should see a tooltip popup when you hover over the question mark. Here's the HTML for this:

<h2 class="wt1" title="this is just some more information 
    about the heading">A General Heading</h2>

And here's the simple jQuery:

jQuery('h2.wt1').whatsThis();

Now by default the plugin will just append the character into the main element, causing it to render as plain old text. However, we can change things up with a couple of different options. Here is the same HTML (okay, a different class for demo purposes, but you get the point) rendered with some different options:

A General Heading

Notice that we have a different character and slightly different styling. We overwrote the default display character and added an extra class to do some custom styling. Here's the code for this one:

jQuery('h3.wt2').whatsThis({
        useChar : '( i )',
        extraClass : 'wt2'
    });

For one final example, we'll use a <span> tag as our content wrapper and set the addMode property to after, which will place our info button after the element, rather than appending it within the element.

A Paragraph

This example also shows how we can use still another class to create an image-based icon info button. Here is the code:

jQuery('span.wt3').whatsThis({
        useChar : '( i )',
        extraClass : 'wt3',
        addMode: 'after'
    });

All-in-all, the plugin comes equipped with a number of different options:

extraClass String - All of the info buttons created by the plugin have the class of whatsThis. This option allows you to add extra classes.
useChar String - Allows you to set the character(s) that will appear within the info button. Defaults to (?). For no character, simply set this value to empty.
padLeft String - Sets the amount of padding added to the left side of the button. Defaults to '5px'
addMode String - Sets the way that the plugin adds the button. You can use either of the following options:
  • append - will append the button to the end of the current element. Usually works best for block level elements such as headings
  • after - will insert the button directly after the element. Usually works best for inline elements.
Defaults to append
helpCursor Boolean - Sets whether or not the plugin will automatically set the cursor value for the button to 'help'. Defaults to true.
useAttr String - Set the HTML attribute that is used to store the contents of the tooltip. The majority of the time, you will want to use the title attribute, however there may by instances in which another element may be appropriate.
clearAttr Boolean - Sets whether or not the plugin will clear the contents out of the attribute that holds the contents of the tooltip. This makes sense when using the title attribute, but may not be appropriate in all circumstances. Defaults to true.