Ways to use jQuery tooltip plugin with examples

The Tooltip plugin of jQuery UI

The jQuery UI has a great plugin that will replace traditional and bored looking, small sized tooltips to highly customizable, nicely colored as you want and larger font size with many other options.

The Tooltip is a way to inform users about current elements/features or tip to what they are interacting in a website.

For example, while filling a password textbox, a tooltip appearing to let them know what password limitation or requirements are. Similarly, a menu bar has a small piece of text, as user brings the mouse over a menu item you can show a tooltip with large description and so on.

The plugin is called jQuery UI tooltip, which is the part of jQuery UI library. If you are using other components of UI library then include or refer the whole file. If using one or a few components like the tooltip, slider, dialog etc. then just include specific component and download a customized JS version of jQuery UI.

You can see the list of customizable components here: http://jqueryui.com/download/. That should help in the faster website as far as loading is concerned. Since this is becoming more and more ranking signal for SEO.

All it requires is to call tooltip widget, after including the jQuery UI library in the script section, add some styles and create tooltips by using a title attribute in e.g. hyperlinks, textboxes or other elements in your web document.

Now let us look at a few examples of using the tooltip plugin with codes.

A jQuery tooltip example in hyperlinks

In the following example, I will create tooltips by using jQuery UI tooltip plugin that will use ordinary tooltip in <a> tag. As you hover over the link it will show tooltips.

jquery tooltip

See online demo and code

The script:

The CSS

The markup:

The example uses custom CSS which is the basic, though. In following examples, you can see different styles of tooltips for other elements.

An example of tooltips in HTML forms

You can use tooltip jQuery plugin in form elements as well.  In fact, this is quite useful to inform users what a  text box field purpose is, with a little more detail. For example, the password field simply tells users to enter the password. However, these days passwords generally require certain criteria to meet like password must be 8-24 characters long, must contain a number, a capital letter, and special character etc.

Using a well-designed tooltip in each form field by using jQuery tooltip widget ahead of element won’t be a bad idea. Following example shows how you can use it.

jquery tooltip form

See online demo and code

The jQuery code:

 CSS for this example

The HTML code for simple form displaying tooltips

As you can see, when you enter into any text field it will show a tooltip attached to it. When you enter into password field it will show a tooltip with line-breaks. I used green colored and added some style; amend this as per the need.

In script section tooltipClass: “uitooltip” is used to assign CSS class to this tooltip widget that will override default style. After that, the position option is used that will display tooltip ahead of text boxes. If not used it will display below text fields.

Tooltip example with display effects

To add more coolness into tooltips in jQuery UI widget, you can add different effects to display and close tooltips. You can use show and hide options of tooltip plugin that enable you to add different effects like blind, bounce, drop, fade, slideDown, explode etc. You can add a delay as well to open or close slowly.

Following example demonstrates how you can add effect while opening or closing tooltips (as you bring the mouse over or take away) by using jQuery tooltip widget options.

jquery tooltip effect

See online demo and code

jQuery:

 The CSS:

The Markup:

In above example, a span element is used to display tooltip as the mouse is over it. As you bring the mouse over it, the tooltip will display with a slideDown effect. AS you leave, it will disappear by shake effect. For the whole list of available effects supported go to this page: http://api.jqueryui.com/category/effects/

An example of moving/tracking tooltip

Your visitors may use the mouse to go through the content of the website. While you have tooltips for different elements, it may be useful to track or move tooltips as long as a user is in that element’s area. To learn more what this actually is about, see an example by clicking the link below. Bring mouse over the paragraph and move from start to end and see how tooltip is moving.

jquery tooltip track

See online demo and code

The script:

The CSS:

The markup:

You can do this quite easily by using track option of jQuery UI tooltip plugin and using true as its value.

track: true

Tooltip with content option rather a title example

In above examples, I used title attribute at the element level that is displayed as a tooltip. The jQuery tooltip plugin has an option called content that you can use instead of the title attribute. You can either use title tag in an element or use items option in script section and specify selector there.

The great advantage of using content option is you can use HTML/CSS to create a tooltip. That means the content of tooltip is highly customizable.

Following example shows how you can use it:

jquery tooltip content

See online demo and code

The jQuery code:

CSS for this demo

Markup:

As you can see the demo includes a tooltip header, then some text in a div element and an image inside. You can style each section separately. Similarly, you can include other elements inside tooltips.