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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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.

Before starting, be sure to use the latest version of your Internet browser.

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>

Example of adding a text on hover on a link:

You can add hover text (also known as a tooltip) to a link in HTML using the title attribute. The title attribute specifies extra information about an element, and is displayed as a tooltip when the user hovers over the element.

Here's an example of how to add hover text to a link:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Example</h2>
    <a href="https://w3docs.com" title="Click to visit W3docs.com">W3docs</a>
  </body>
</html>

In this example, we have an anchor (<a>) tag that links to https://w3docs.com. We've added a title attribute to the tag, which contains the hover text "Click to visit W3docs.com". When the user hovers over the link, this text will be displayed as a tooltip.

You can customize the hover text to be whatever you want, and you can apply this technique to any HTML element that supports the title attribute.

The 'title' attribute is a standard HTML attribute that is supported by all modern web browsers, including Chrome, Firefox, Safari, Opera, and Edge. It is also supported by older browsers, going back to at least Internet Explorer 6.

However, it's worth noting that some assistive technologies, such as screen readers, may not announce the title attribute by default, and some users may have disabled the display of tooltips in their browser settings. As a result, it's generally recommended to use the title attribute sparingly, and to provide any important information in the content of the page itself, rather than relying solely on tooltips.