Post
Ask Question

How to Create Tooltip In jQuery

This article and attached code exampe explains how to create a simple tooltip using jQuery.
 
First we download the file and plug in a website; see: Query plugin 1.9 or later version.
 
Add files to your project and include script using the following code. The following code is an HTML page that uses JQuery tooltip using .ui-tooltip. As you can see from the code, you can also specify how your tooltip will look like by providing font size, family, and colors.
 
Program
 
Simple_Tooltip.html 
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta charset="utf-8" />  
  4. <title>jQuery Tooltip</title>  
  5. <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />  
  6. <script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
  7. <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>  
  8. <style type="text/css">  
  9. .ui-tooltip  
  10. {  
  11. font-size:10pt;  
  12. font-family:Verdana;  
  13. font-stretch:condensed;  
  14. font-style:italic;  
  15. color:blue;  
  16. }  
  17. </style>  
  18. <script type="text/javascript">  
  19. $(function () {  
  20. $(document).tooltip();  
  21. });  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <form id="form1" runat="server">  
  26. <table>  
  27. <tr><td colspan="2" align="center"><b>Employee Information</b></td></tr>  
  28. <tr>  
  29. <td>Name:</td>  
  30. <td><input id="Name" name="name" title="Please enter your name." /></td>  
  31. </tr>  
  32. <tr>  
  33. <td>Address:</td>  
  34. <td> <input id="address" name="address" title="Please enter your address." /></td>  
  35. </tr>  
  36. <tr>  
  37. <td>City:</td>  
  38. <td> <input id="city" name="city" title="Please enter your city" /></td>  
  39. </tr>  
  40. </table>  
  41. </form>  
  42. </body>  
  43. </html>  
Now, when you run this HTML page in your browser, you will see something like this:
 
Hover the mouse over the textboxes:
 
fig1.jpg

 

 
Output 2 
 
fig2.jpg

 

 
Output 3
 
fig3.jpg

 

Using the same method, you can create your own UI tooltips using JQuery.
 
For more information, download the attached sample application.

 


Similar Articles