How to add a title in anchor tag using jQuery ?

Last Updated : 30 May, 2023

In this article, we will see how to add a title in the anchor tag using jQuery. The title property is used to specify extra information about the element. When the mouse moves over the element then it shows the information. The prop() method is used to add properties and values to the element using jQuery. For adding a title in an anchor tag we are using the prop() method of jQuery.

Syntax:

$("#GFG").prop('title', "Title Value");

Approach: First we will create a paragraph element that will contain an anchor element with id GFG. We will also create a button and when the button is clicked, the jQuery part is executed and added title prop to the anchor element.

Example 1: In this example, we are adding a title property to the anchor element by using jQuery.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <script src="//code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <title>
        How to add a title in anchor tag using jQuery?
    </title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>How to add a title in anchor tag using jQuery?</h3>
    <p>
        Welcome to <a id="GFG" href="https://www.geeksforgeeks.org/">
            GeeksforGeeks</a>
    </p>
    <input type="button"
           value="Add Title Attribute"
           id="btn"
           style="padding: 5px 15px;">
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#GFG").prop('title',
                    "A computer science portal")
            });
        });
    </script>
</body>
 
</html>

Output:

Approach: First we will create a paragraph element that will contain an image as an anchor element with id GFG. We will also create a button and when the button is clicked, the jQuery part is executed, and added the title prop to the anchor element (image).

Example 2: In this example, we are adding a title property to the anchor element (image) by using jQuery.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <script src="//code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <title>
        How to add a title in anchor tag using jQuery?
    </title>
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>How to add a title in anchor tag using jQuery?</h3>
    <p>
        <a id="GFG"
           href="https://www.geeksforgeeks.org/">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        </a>
    </p>
    <input type="button"
           value="Add Title Attribute"
           id="btn"
           style="padding: 5px 15px;">
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#GFG").prop('title',
                    "A computer science portal")
            });
        });
    </script>
</body>
 
</html>