Open In App

jQuery UI Tooltips content Option

Last Updated : 19 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use content option in tooltip.
The
content option is used to add some content in the tooltip.

Syntax:

$( ".selector" ).tooltips(
   { content: "GeeksforGeeks!" }
);

Parameters:

  • string: The value you want to insert in the tooltip.

Approach: First, add jQuery UI scripts needed for your project.

<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”stylesheet”>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example: The following example demonstrates the content option for the tooltip.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link href=
        rel="stylesheet">
    </script>
  
    </script>
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        jQuery UI | Tooltip content option
    </h3>
  
    <script>
        $(function () {
            $("#gfg1").tooltip({
                content: "GeeksforGeeks!"
            });
            $("#gfg1").tooltip();
            $("#gfg2").tooltip();
        });
    </script>
</head>
  
<body>
    <label for="name">Name:</label>
    <input id="gfg1" title="GeeksforGeeks">
  
    <p><a id="gfg2" href="" title="GeeksforGeeks">
        Click here!
    </a></p>
</body>
  
</html>


Output:

Reference: https://api.jqueryui.com/category/widgets/



Previous Article
Next Article

Similar Reads

jQuery UI Tooltips hide option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use hide option in jQuery UI tooltip. The hide option is used to
3 min read
jQuery UI Tooltips track Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to adds new themes and allows for customization. In this article, we will see how to use the track option in jQuery UI tooltips. The track option if
2 min read
jQuery UI Tooltips show option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use the show option in jQuery UI tooltips. The show option is use
2 min read
jQuery UI Tooltips disabled Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use the disabled option in jQuery UI tooltip. The disabled option
2 min read
jQuery UI Tooltips option() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to adds new themes and allows for customization. In this article, we will see how to use option method in jQuery UI tooltips. The option method is us
1 min read
jQuery UI Tooltips enable() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI tooltip widget helps us to adds new themes and allows for customization. In this article, we will see how to use enable option in jQuery UI tooltips. The enable option is use
1 min read
jQuery UI Tooltips disable() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use disable option in jQuery UI tooltips. The disable option is u
1 min read
jQuery UI Tooltips destroy() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use destroy option in jQuery UI tooltips. The destroy option is u
1 min read
jQuery UI Tooltips close() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to adds new themes and allows for customization. In this article, we will see how to use the close option in jQuery UI tooltips. The close option is
1 min read
jQuery UI Tooltips open() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to adds new themes and allows for customization. In this article, we will see how to use open option in jQuery UI tooltips. The open option is used t
1 min read