1. Snippets
  2. ›
  3. HTML
  4. ›
  5. How to Add a Mouseover Text with HTML

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>

Related Resources

Do you find this helpful?

Related articles