JQuery UI Tooltip

The more you help your visitor perform different actions on your website, the more likely will he return to your website. Providing ease of use to the user is the first and foremost task for a developer. There are different ways of adding visual help to any control in the website. One such control is the tooltip control. Tooltip is a small floating label around an html control. For instance, often times if you hover your mouse over an input control, a small message appears with some info about the control. JQuery UI tooltip widget provides ability to create tooltips. To create a tooltip, simply call tooltip() function with or without optional parameters on any element which you want to have a tooltip. Any element having tool tip should have a title attribute. The tooltip message is defined by this title attribute. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tooltip</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
         $(function() {
            $( "#spin-div").tooltip();
            $( "#fruitlist").tooltip();
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="fruit-input" title ="Enter Fruit Name"/>
          
          <ul id="fruitlist" title="Fruits List">
            <li>Apple</li>
            <li>Mango</li>
            <li>Guava</li>
          </ul>
      </div>
   </body>
</html>

Download Code Run Code

The above webpage contains a an input control and a list of items. JQuery factory method selects both of these elements via id and call tooltip() on each of these. The tooltip message for both elements is specified by their respective title attribute. Now hover your mouse over the input and list controls. You should see a tooltip fade in. Similarly, Leaving your mouse from the controls should fade out the tooltip.

JQuery UI Tooltip with Optional Parameters

You can also pass additional optional parameters to the tooltip() function to change the behavior of the tooltip. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example uses disable optional parameter with value true. This disables tooltip functionality on the element. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tooltip with Optional Parameters</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    
      <script>
         $(function() {
            $( "#spin-div").tooltip();
            $( "#fruitlist").tooltip({
               disabled: true
            });
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="fruit-input" title ="Enter Fruit Name"/>
          
          <ul id="fruitlist" title="Fruits List">
            <li>Apple</li>
            <li>Mango</li>
            <li>Guava</li>
          </ul>
      </div>
   </body>
</html>

Download Code Run Code

In the above code, the disable property of tooltip function is set to true for list. Therefore, if you hover over the list, no tooltip shall appear.

<<< JQuery UI TabsJQuery UI Color Animation >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .