How to use Title to add hover text in HTML

HTML has many attributes that you can use to improve the web experience for your users.

One of the most useful attributes is the title attribute that lets you add some hover text over an element.

In this post, we'll learn how to use the title attribute in HTML.

Adding hover text to an element

As mentioned before, you can add hover text to an element by using the title attribute.

First, let's start with an example element:

HTML
<p>Hover over this text</p>

<p>Hover over this text</p>
 

If you hover now, nothing will happen.

Now you just need to add the title attribute to the element.

HTML
<p title="Hello world!">Hover over this text</p>

<p title="Hello world!">Hover over this text</p>
 

Now, when you hover over the element, you will see the text in the title attribute, Hello world!.

Another way to do this is by using abbreviations with the abbr tag.

HTML
<abbr title="Website Development">Web Dev</abbr>

<abbr title="Website Development">Web Dev</abbr>
 

Conclusion

In this post, we learned how to use the title attribute to add text on hover.

Remember that you can also use it in conjunction with the abbr tag to explain what an abbreviation stands for.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share