Learning jQuery

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.

Related Post:

• Tutorial for creating stylized tooltip using jQuery

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".

$(function() {
    $('#txtName').tooltip();
});?

There are many more things which can be done with tooltip widget. So keep visiting as I will be posting about them as well.

Feel free to contact me for any help related to jQuery, I will gladly help you.