Skip to content
Related Articles
Open in App
Not now

Related Articles

How to add a title in anchor tag using jQuery ?

Improve Article
Save Article
  • Last Updated : 02 Aug, 2022
Improve Article
Save Article

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. 

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

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!