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
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
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
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!
- Getting Started with Svelte
- Getting Started with Express
- How to Serve Static Files with Nginx and Docker
- Getting Started with Deno
- How to deploy a MySQL Server using Docker
- How to deploy a Node app using Docker
- Learn how to use v-model with a custom Vue component
- Getting Started with Moment.js
- Getting Started with Vuex: Managing State in Vue
- Setting Up a Local Web Server using Node.js
- Using Axios to Pull Data from a REST API
- How To Create a Modal Popup Box with CSS and JavaScript