Table of Contents
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>
- HTML
<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>
- HTML
<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>
- HTML
<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!
- How to Install Node on Windows, macOS and Linux
- Getting Started with Express
- Git Tutorial: Learn how to use Version Control
- Best Visual Studio Code Extensions for 2022
- How to build a Discord bot using TypeScript
- Getting Started with Deno
- How to deploy an Express app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Getting Started with Moment.js
- Using Push.js to Display Web Browser Notifications
- Getting Started with Vuex: Managing State in Vue
- Using Axios to Pull Data from a REST API