HTML - DOM Element title Property

Quiz

The HTML DOM Element title property is used to set and get the title property of any element in the HTML document. It also updates the existing title attribute value with a new one.

In HTML, the title property allows elements to display additional information as tooltips when the elements are hovered over.

Syntax

Following is the syntax of the HTML DOM Element title (to set the property) property −

element.title = New_title;

Where, the New_title is a new value you want to set (assign) for the title property.

Use the following syntax to get the title property value −

element.title;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns the value of the title attribute of that element.

Example 1: Setting "title" Property to <p> Element

The following is the basic example of an HTML DOM Element title property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element title</title>
</head>
<body>
<h3>HTML DOM Element title Property</h3>
<h4>Hover over the below paragraph to see the title.</h4>
<p id="demo">This is a paragraph.</p>
<script>
   let my_ele = document.getElementById('demo');
   my_ele.title = "You set the title";
</script>
</body>
</html>

The above program will dynamically set the title property of the p element.

Example 2: Retrieving "title" Property Value

Here is another example of using the HTML DOM Element title property. This property retrieves the value of the title property of an <a> element in the document −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element title</title>
</head>
<body>
<h3>HTML DOM Element title property</h3>
<p>Hover over on the below link</p>
<a href="/html/index.htm" title="Click here to learn more" id="my_link">
Learn More
</a>
<br><br>
<button onclick="get_prop()">Get the title proerty value</button>
<p id="res"></p>
<script>
   function get_prop(){
      let link = document.getElementById('my_link');
      document.getElementById('res').innerHTML = link.title;
   }
</script>
</body>
</html>

The above program displays the title property value of the "a" element when the button is clicked.

Example 3: Updating the "title" Property Value

In the example below, we use the title property to update the old title with a new one for the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element title</title>
</head>
<body>
<h3>HTML DOM Element title property</h3>
<p>Hover over on the below content</p>
<div id="my_div" title="Inside div">Hey! how are you?</div>
<br>
<button onclick="update()">Update title value</button>
<p id="res"></p>
<script>
   function update(){
      let my_div = document.getElementById('my_div');
      my_div.title = "Title updated";
      document.getElementById('res').innerHTML = "Title updated...";
   }
</script>
</body>
</html>

When the button is clicked, the title property will be updated to "Title updated."

Supported Browsers

Property
title	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page