jQuery UI | Tooltip

The tooltip widget in jQuery UI is different from the traditional tooltip primarily by making it more themeable and making it much more customizable. Some of the customizations available are:

  • Extra content like footnotes etc can also be displayed by retrieving it through Ajax.
  • Customizing the fields for Warning and error fields.
  • Customize the position, i.e. to center the tooltip above elements.

By default, a fading animation is used to display the tooltip.

Syntax:



$( "#div_tooltip" ).tooltip({
});

Attribute Values:

  • content: This attribute represents the content of a tooltip. By default, its value is a function returning the title attribute.
  • disabled: This attribute when set to true disables the tooltip. By default its value is false.
  • hide: This attribute represents the animation effect when hiding the tooltip. By default its value is true.
  • items: This option indicates which items can show tooltips. By default its value is [title].
  • position: This attribute decides the position of the tooltip with respect to the associated target element. By default its value is function returning the title attribute. Possible values are: my, at, of, collision, using, within.
  • show: This attribute represents how to animate the showing of tooltip. By default its value is true.
  • tooltipClass: This attribute is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null.
  • track: This attribute when set to true, the tooltip follows/tracks the mouse. By default its value is false.

The tooltip is addable which will override the parent string written with the title attribute. This gives us an advantage as we can change the tooltip by using a script, it is like the same element can show different strings of tooltips under different requirements. Let’s try that. Here we have defined the title as “Welcome to geeksforgeeks” which is overwritten inside the javascript code.
Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <link href=
          rel='stylesheet'>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <div id=div_tooltip 
             title='Welcome to geeksforgeeks'>
            Bring your Mouse here
        </div>
  
        <script src=
        </script>
        <script src=
        </script>
  
        <script>
            $(document).ready(function() {
  
                $("#div_tooltip").tooltip({});
            })
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

Overwriting the title in Tooltip: Another major advantage of the Tooltip widget in jQuery UI is that the title can be overwritten as specified while defining the element. This can be done by specifying the message inside the content option inside our JavaScript code.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <link href=
          rel='stylesheet'>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=div_tooltip 
             title='Welcome to geeksforgeeks'>
          Bring your Mouse here
      </div>
  
        <script src=
      </script>
        <script src=
      </script>
  
        <script>
            $(document).ready(function() {
                $("#div_tooltip").tooltip({
                    content: "This is my content"
                });
            })
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

Disabling Tooltip: This attribute when set to true disables the tooltip. By default its value is false.

Example 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <link href=          
          rel='stylesheet'>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=div_tooltip
             title='Welcome to geeksforgeeks'>
          Bring your Mouse here
      </div>
  
        <script src=
      </script>
        <script src=
      </script>
  
        <script>
            $(document).ready(function() {
  
                $("#div_tooltip").tooltip({
                    disabled: true
                });
  
            })
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

Items: The items attribute is used to set a different element message to be displayed as a tooltip. In the below example, one textbox is kept inside the div tag. By default, the message written inside the textbox is to be displayed as a tooltip, but by setting the items to the div tag, and display the message written inside the title attribute of div tag as tooltip.



Example 4:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <link href=
          rel='stylesheet'>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div id=div_tooltip title='I am inside a Div tag'>
            <input type=textbox 
                   name=my_text 
                   id=my_text 
                   title='I am the input box'>
        </div>
  
        <script src=
      </script>
        <script src=
      </script>
  
        <script>
            $(document).ready(function() {
  
                $("#my_text").tooltip({
                    items: 'div'
                });
  
            })
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

Position: This attribute is used to display the tooltip at any position relative to the main element.
Possible values are.

  • my: This is the tooltip box.
  • at: The element for which the tooltip is displayed.

Also note that: