How to Add a Mouseover Text with HTML
It is possible to add a mouseover text description without Javascript and even without CSS. Let’s see how we can do this by using only HTML.
Solutions with HTML
To add a text on hover, you’ll need to use the title attribute. In this snippet, we'll use it on the <div>, <span>, <abbr>, and <p> elements.
Example of adding a text on hover with the <div> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Example</h2>
<div title="This is a mouseover text!">Hover this text to see the result.</div>
</body>
</html>Result
Hover this text to see the result.
Example of adding a text on hover with the <span> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Example</h2>
<span title="Hello world!">Hover this text to see the result.</span>
</body>
</html>Example of adding a text on hover with the <abbr> and <p> elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Example</h2>
<abbr title="Hypertext Markup Language">HTML</abbr>
<p title="Hello world">Hover this one</p>
</body>
</html>
Sorry about that
Thanks for your feedback!
Thanks for your feedback!
Do you find this helpful?