Trending September 2023 # Examples Of Tooltip By Using The Title Attribute # Suggested October 2023 # Top 10 Popular

You are reading the article Examples Of Tooltip By Using The Title Attribute updated in September 2023 on the website Phuhoabeautyspa.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Examples Of Tooltip By Using The Title Attribute

Introduction to jQuery Tooltip

Tooltip is a piece of information or message that appears when we hover the cursor over an element. Tooltip can be attached with any element. It can be a label, textbox, etc. To use a tooltip we need to set value for the title attribute. A jQuery tooltip replaces the native tooltip. It allows us to have customized tooltip. It not only can be applied on an element or so but on the whole page at once.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax:

$(selector).tooltip();

For using the jQuery tooltip we need to use the tooltip() method. Based on the selector of a particular element, the corresponding tooltip gets attached and the same is displayed.

Functions of jQuery Tooltip

The tooltip() method allows us the implementation of jQuery tooltip. It replaces the native tooltip which is set using the title attribute.

There is also an option called content which can be used to specify the content.

If we specify both, that is the title attribute and content option, the value of the title attribute gets overridden by the value of the content option.

The content option supports multiple types as a string and a function.

Usually, the tooltip is displayed below the element, inspite of hovering the mouse anywhere on the element.

If we want the tooltip to follow the mouse, it can be implemented by setting the property track to true.

Examples

Given below are the examples:

Example #1

Example of a tooltip by setting a value against the title attribute.

Code:

$(document).ready(function(){ });

Output:

When we hover the mouse over the name label and the textbox, the below image shows how the tooltip appears.

Example #2

Example of jQuery tooltip()method.

Code:

$(document).ready(function(){ $(“#t1”).tooltip(); });

Output:

As seen we have applied jQuery tooltip only for the textbox and not the label name.

Example #3

Demonstration of the content option of the tooltip method.

There are two types:

a. String type in content option

We will be using the content option by passing the value directly in string.

Code:

$(document).ready(function(){ $(“#t1”).tooltip({ content : “Content overriding the title value” }); });

Output:

As explained in the working, the content option overrides the title value.

b. Function in content option

We will be using the content option by passing through the function.

$(document).ready(function(){ $(“#t1”).tooltip({ content :getDataFromToolTip }); function getDataFromToolTip(){ return “This tooltip is returned from a function” } });

Output:

As per the above code, the displayed tooltip is passed to the content using a function.

Example #4

Example of making the tooltip follow the hovering of a mouse using the track property.

Code:

$(document).ready(function(){ $(“#t1”).tooltip({ content :getDataFromToolTip, track:true }); function getDataFromToolTip(){ return “This tooltip is returned from a function” } });

Output:

By setting the track property to true, now the tooltip follows the mouse hovering.

Conclusion

Thus we studied how the jQuery tooltip() method allows us to have customized tooltip. We also went through an example of tooltip by using the title attribute. We demonstrated the content option available in jQuery tooltip() method with its types that are string and function and also looked over an example of making the tooltip follow the hovering of a mouse using the track property.