Create Tooltip using jQuery UI library

I had already posted that jQuery UI 1.90 is released and there are some widgets which are introduced with jQuery UI 1.90. One of the new widget is Tooltip. In this post, you will learn how to create tooltip using jQuery UI library.

Before we begin let me just remind you that to create tooltip we need to use jQuery UI 1.90 version and you can download it from here.

Tooltips can be attached to any element. To display tooltips, one need to add title attribute to input elements and title attribute value will be used as tooltip. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element.

To display tooltip, jQuery UI library provide tooltip() which should be called on element on which you want to display tooltip. So if you want to display tooltip for all elements of the page, then you can call tooltip() on document object.

$(function() {
$(document).tooltip();
});​

Above code will display tooltip for all the input elements which have title attributes.

See result below

If you are interested to display tooltip to any specific element then all you need to do is to change your selector. For example, below code will associate tooltip with input element with ID "txtName".

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..