Display Tooltip On Mouse Hover Using jQuery UI

Introduction: In this article i am going to explain that how we can show tolltip at mouse hover event on any html control using jquery UI.

Description: Its very simple and just follow these steps.

1. Add reference of jQuery1.9 UI in the aspx page or master page in between <Script> tag

2. Set Title attribute to those html controls for whom you want to show tooltip.

3. Add following method to display tooltip for all control in the html page in between <Script> tag.

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

This method will display tooltip for all the controls in html page whose title attribute is set.

$(function () {
         $(‘#’txtName).tooltip();
})

However if you want to display tooltip only for selected controls then instead of (doument) you will have to use id (#’txtname’) eg of that specific controls.

4. Run your page in the browser to see the effect.

Example:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s