How to use Title to add hover text in HTML

Updated onbyAlan Morel
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:

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

If you hover now, nothing will happen.

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

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

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.

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


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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
Copyright © 2017 - 2024 All rights reserved. Made with ❤ in NY.