Post
Ask Question

jQueryUI - Day 12 (Tooltips)

Before reading this article, I highly recommend reading the previous parts of the series:

Tooltip is used to display some additional information related to any element, on mouse over event tooltip show the text. To display tooltips, just add title attribute to input elements and title attribute value will be used as tooltip. jQueryUI provide a customizable, themeable tooltips that replace the native tooltips. jQueryUI provides tooltip() method to add tooltip to any element on which you want to display tooltip.

Syntax:

$(selector, context).tooltip(options)

Or

$(selector, context).tooltip("action", [params])

Example:

  1. <!DOCTYPEhtml>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     $("#tooltip-1").tooltip();  
  13.                     $("#tooltip-2").tooltip();  
  14.                     $("#tooltip-3").tooltip();  
  15.                 });  
  16.                 </script>  
  17.                 <style>  
  18.                 #div1 {  
  19.                     background-color: coral;  
  20.                     color: ButtonHighlight;  
  21.                     font-size: 20px;  
  22.                     height: 450px;  
  23.                     width: 800px;  
  24.                     text-align: center;  
  25.                     margin-left: 150px;  
  26.                     padding-left: 100px  
  27.                 }  
  28.                 </style>  
  29.                 </head>  
  30.   
  31.                 <body>  
  32.                     <div id="div1"> <span>************Tooltip*************</span>  
  33.                         <table>  
  34.                             <tr>  
  35.                                 <td><span>Name:</span></td>  
  36.                                 <td>  
  37.                                     <input id="tooltip-1" type="text" title="Enter Your Name" />  
  38.                                 </td>  
  39.                             </tr>  
  40.                             <tr>  
  41.                                 <td><span>City:</span></td>  
  42.                                 <td>  
  43.                                     <input type="text" id="tooltip-2" title="Enter Your City" />  
  44.                                 </td>  
  45.                             </tr>  
  46.                             <tr>  
  47.                                 <td>  
  48.                                     <input type="button" id="tooltip-3" value="Submit" title="Click! If You Want to Submit" />  
  49.                                 </td>  
  50.                             </tr>  
  51.                         </table>  
  52.                     </div>  
  53.                 </body>  
  54.   
  55.             </html>  
Output

Run program

Options

 

Option Description Example
content Represents content of a tooltip. By default value is function returning the title attribute. $("#tooltip-1").tooltip({ content: "Create title!" })
disabled If set to true, disables the tooltip $("#tooltip-1").tooltip({ disabled: true })
hide Represents the animation effect during hiding the tooltip. By default its value is true. $("#tooltip-1").tooltip({ hide: { effect: "explode", duration: 800 }})
items Define which items can show tooltips if you're using something other than the title attribute for the tooltip content. By default its value is title. $("#tooltip-1").tooltip({items: "img[alt]"})
position Identifies the position of the tooltip in relation to the associated target element. $("#tooltip-1").tooltip({position: { my: "left+15 center", at: "right-10 center" }})
show Represents the animation effect during showing the tooltip. By default its value is true. $("#tooltip-1").tooltip({ show: { effect: "explode", duration: 800 }})
tooltipclass Define which class can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null. $("#tooltip-1").tooltip({ tooltipClass: "custom-tooltip-styling" })
track Define whether the tooltip should track (follow) the mouse. By default value is false. $("#tooltip-1").tooltip({ track: true })

Methods

Method Description Example
close() Closes a tooltip. $("#tooltip-1").tooltip("close")
destroy() Removes the tooltip functionality completely. This will return the element back to its pre-init state $("#tooltip-1").tooltip("destroy")
disable() Disables the tooltip. $("#tooltip-1").tooltip("disable")
enable() Enables the tooltip. $("#tooltip-1").tooltip("enable")
instance() Retrieves the tooltip's instance object. $("#tooltip-1").tooltip("instance")
open() Programmatically open a tooltip. $("#tooltip-1").tooltip("open")
option(option_name) Gets the value currently associated with the specified optionName. varobj=$("#tooltip-1").tooltip("option","Tooltipclass")
option() Gets an object containing key/value pairs representing the current tooltip options varobj=$("#tooltip-1").tooltip("option")
option(option_name,value) Sets the value of the tooltip option associated with the specified optionName. $("#tooltip-1").tooltip("option","disabled",true)
widget() Returns a jQuery object containing the original element. varobj=$("#tooltip-1").tooltip("widget")

Events

Event Description Example
close(event,ui) Triggered when a tooltip is closed, triggered on focusout or mouseleave. $("#tooltip-1").tooltip({ close: function (event, ui) { } })
create(event,ui) Triggered when the tooltip is created. $("#tooltip-1").tooltip({ create: function (event, ui) { } })
open(event,ui) Triggered when a tooltip is shown, triggered on focusin or mouseover. $("#tooltip-1").tooltip({ open: function (event, ui) { } })

Let us take some example.

Example 1:

  1. <!DOCTYPEhtml>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     var obj = $("#tooltip-1").tooltip(  
  13.                     {  
  14.                         content: "<h6 style=\"color:yellow ;background-color:#37BFB3\">Enter Your Name</6>",  
  15.                         hide:  
  16.                         {  
  17.                             effect: "explode",  
  18.                             duration: 600  
  19.                         },  
  20.                         position:  
  21.                         {  
  22.                             my: "left+12 center",  
  23.                             at: "right+5 center"  
  24.                         }  
  25.                     })  
  26.                     $("#tooltip-2").tooltip();  
  27.                     $("#tooltip-3").tooltip();  
  28.                 });  
  29.                 </script>  
  30.                 <style>  
  31.                 #div1 {  
  32.                     background-color: coral;  
  33.                     color: ButtonHighlight;  
  34.                     font-size: 20px;  
  35.                     height: 450px;  
  36.                     width: 800px;  
  37.                     text-align: center;  
  38.                     margin-left: 150px;  
  39.                     padding-left: 100px  
  40.                 }  
  41.                 </style>  
  42.                 </head>  
  43.   
  44.                 <body>  
  45.                     <div id="div1"> <span>************Tooltip*************</span>  
  46.                         <table>  
  47.                             <tr>  
  48.                                 <td><span>Name:</span></td>  
  49.                                 <td>  
  50.                                     <input id="tooltip-1" type="text" title="Enter Your Name" />  
  51.                                 </td>  
  52.                             </tr>  
  53.                             <tr>  
  54.                                 <td><span>City:</span></td>  
  55.                                 <td>  
  56.                                     <input type="text" id="tooltip-2" title="Enter Your City" />  
  57.                                 </td>  
  58.                             </tr>  
  59.                             <tr>  
  60.                                 <td>  
  61.                                     <input type="button" id="tooltip-3" value="Submit" title="Click! If You Want to Submit" />  
  62.                                 </td>  
  63.                             </tr>  
  64.                         </table>  
  65.                     </div>  
  66.                 </body>  
  67.   
  68.             </html>  
Output

run

In above example we define a custom content for tooltip. In Content of tooltip we create a header tag and assign value for background-color and color css property. We also assign the position parameter and hide animation.

Example 2
  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     var obj = $("#tooltip-1").tooltip(  
  13.                     {  
  14.                         content: "<h6 style=\"color:yellow ;background-color:#37BFB3\">Enter Your Name</6>",  
  15.                         hide:  
  16.                         {  
  17.                             effect: "explode",  
  18.                             duration: 600  
  19.                         },  
  20.                         position:  
  21.                         {  
  22.                             my: "left+12 center",  
  23.                             at: "right+5 center"  
  24.                         },  
  25.                         track: true,  
  26.                         show:  
  27.                         {  
  28.                             effect: "slideDown",  
  29.                             duration: 700  
  30.                         },  
  31.                         open: function (event, ui)  
  32.                         {  
  33.                             ui.tooltip.hover(function ()  
  34.                             {  
  35.                                 $(this).fadeTo("slow", 0.3);  
  36.                             });  
  37.                         }  
  38.                     })  
  39.                     $("#tooltip-2").tooltip(  
  40.                     {  
  41.                         track: true  
  42.                     });  
  43.                     $("#tooltip-3").tooltip(  
  44.                     {  
  45.                         track: true  
  46.                     });  
  47.                     $("#tooltip-3").click(function ()  
  48.                     {  
  49.                         $('#tooltip-1').tooltip("open");  
  50.                     })  
  51.                 });  
  52.                 </script>  
  53.                 <style>  
  54.                 body {  
  55.                     margin-top: 100px;  
  56.                 }  
  57.                   
  58.                 .ui-tooltip-content::after {  
  59.                     content: "";  
  60.                     position: absolute;  
  61.                     border-style: solid;  
  62.                     display: block;  
  63.                     left: 90px;  
  64.                 }  
  65.                   
  66.                 .ui-tooltip-content::before {  
  67.                     bottom: -10px;  
  68.                     border-color: #AAAtransparent;  
  69.                     border-width: 10px10px0;  
  70.                 }  
  71.                   
  72.                 .ui-tooltip-content::after {  
  73.                     bottom: -7px;  
  74.                     border-color: whitetransparent;  
  75.                     border-width: 10px10px0;  
  76.                 }  
  77.                   
  78.                 #div1 {  
  79.                     background-color: coral;  
  80.                     color: ButtonHighlight;  
  81.                     font-size: 20px;  
  82.                     height: 450px;  
  83.                     width: 800px;  
  84.                     text-align: center;  
  85.                     margin-left: 150px;  
  86.                     padding-left: 100px  
  87.                 }  
  88.                 </style>  
  89.                 </head>  
  90.   
  91.                 <body>  
  92.                     <div id="div1"> <span>************Tooltip*************</span>  
  93.                         <table>  
  94.                             <tr>  
  95.                                 <td><span>Name:</span></td>  
  96.                                 <td>  
  97.                                     <input id="tooltip-1" type="text" title="Enter Your Name" />  
  98.                                 </td>  
  99.                             </tr>  
  100.                             <tr>  
  101.                                 <td><span>City:</span></td>  
  102.                                 <td>  
  103.                                     <input type="text" id="tooltip-2" title="Enter Your City" />  
  104.                                 </td>  
  105.                             </tr>  
  106.                             <tr>  
  107.                                 <td>  
  108.                                     <input type="button" id="tooltip-3" value="Submit" title="Click! If You Want to Submit" />  
  109.                                 </td>  
  110.                             </tr>  
  111.                         </table>  
  112.                     </div>  
  113.                 </body>  
  114.   
  115.             </html>  
Output

Output

In this example we defined the content, hide, position, track, show and options for tooltip. We also assigned the open event, that will be triggered when tooltip dialog box will open. We create a click event for button, on the click event of button we open the tooltip’s dialog box.

 


Similar Articles