Open In App

jQuery UI | Tooltip

Last Updated : 06 Dec, 2019
Comments
Improve
Suggest changes
Like Article
Like
Report
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: html 
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
        </script>

        <script>
            $(document).ready(function() {

                $("#div_tooltip").tooltip({});
            })
        </script>
    </center>
</body>

</html>
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: html 
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>

        <script>
            $(document).ready(function() {
                $("#div_tooltip").tooltip({
                    content: "This is my content"
                });
            })
        </script>
    </center>
</body>

</html>
Output: Disabling Tooltip: This attribute when set to true disables the tooltip. By default its value is false. Example 3: html 
<html>

<head>
    <link href=          
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>

        <script>
            $(document).ready(function() {

                $("#div_tooltip").tooltip({
                    disabled: true
                });

            })
        </script>
    </center>
</body>

</html>
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: html 
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>

        <script>
            $(document).ready(function() {

                $("#my_text").tooltip({
                    items: 'div'
                });

            })
        </script>
    </center>
</body>

</html>
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:
  • All horizontal alignment can take three positions: left or right or center.
  • All vertical alignment can take three positions: top or bottom or center.
    • Check this line 
    position: { my: "left center", at: "right top" }
    Here the tooltip's left side center position (my: "left center") will be aligned to main elements right side top position (at: "right top") Example 5: html 
    <html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' 
          rel='stylesheet'>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>

        <div align=center>
            <input type=textbox
                   name=my_text
                   id=my_text
                   title=''>
        </div>

        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
        </script>

        <script>
            $(document).ready(function() {

                $("#my_text").tooltip({
                    content: "I am the textbox",
                    position: {
                        my: "left center",
                        at: "right top"
                    }
                });
            })
        </script>
    </center>
</body>

</html>
    Output: Show-Hide Tooltip: Show & hide are two independent options but we can learn them together. The show attribute is used to add effects to manage the appearance of the tooltip. This is the animation that is created while showing the tooltip. The hide attribute is used to add effects to manage the disappearance of the tooltip. This is the animation that is created while hiding the tooltip. For both show and hide options, use several effects in the below example. Example 6: html 
    <html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          rel='stylesheet'>
</head>

<body>
    <center>
        <h1 style="color:green">Geeksforgeeks</h1>

        <input type=textbox 
               name=my_text 
               id=my_text 
               title='I am the input box'>

        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
      </script>

        <script>
            $(document).ready(function() {

                $("#my_text").tooltip({
                    show: {
                        effect: "slide",
                        duration: 400
                    },
                    hide: {
                        effect: "pulsate",
                        duration: 400
                    }
                });
            })
        </script>
    </center>
</body>

</html>
    Output:

    Next Article
    jQuery UI Tooltips hide option

    M
    mayeshmohapatra
    Improve
    Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox