How Display Text When User Moves Mouse Over an HTML Element

In this ultra-quick tutorial, you’ll learn how to display a brief description text (like a tooltip) when your users hover over an element, like an image or a link.

How to add the tooltip takes a few seconds You simply use the HTML title attribute: title.

Display text on hover (mouse over element)

Here’s a basic example of an image of the Rubik’s Cube. Move your mouse over this image and within a few seconds additional information about the Rubik’s Cube pops up:

Here’s the HTML markup for the image element above:

<img
  src="url-to-image-file"
  title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik."
  alt="A Rubik’s Cube"
/>

Let’s say you want to show a tooltip when your users move their mouse over a link/anchor element.

Move your mouse over this link to reveal the tooltip

And the HTML markup:

<a href="https://techstacker.com" title="Link to TechStacker’s front page"
  >Latest articles</a
>

That’s all there is to it. You can add the title attribute to any HTML element.

Let’s say you have an element that could evoke confusion for some people due to its simplicity. An example could be an icon. Most people cannot recognize more than a handful of icons, but there are literally thousands of different icons on display, in the western world alone.

By simply adding a title attribute onto an icon (e.g. inside an image element) people have the option of getting a clear description of the icon’s function where ever it exists in your UI.

Now you may think to yourself, how many people are aware that hovering over an element will sometimes reveal extra information?

That’s a great question. The answer is that it depends on your target audience. Most tech-savvy people know intuitively that hovering + waiting 1-2 seconds will often reveal extra information about the subject.

But what if your audience largely consists of non-tech savvy people, or perhaps just people who don’t browse a lot on the web?

Well, then my default action is to apply Luke Wroblewski’s universal advice:

If an icon is not clear, or at least not clear to a high percentage of people, then you either make a better icon or pair that icon with a brief description.

Anyhow, adding a title attribute, and of course, an ALT attribute (for screen readers, for the visually impaired) only has upsides. You don’t need to add it to everything, but if you’re in doubt, you might as well do it.

As an added bonus, at least ALT attributes also have an impact on SEO, at least indirectly, but probably also directly.

How so? Well, the ALT description falls under the accessibility category, which Google has made no secret has an impact on how they assess the quality of your website, which will affect your SEO ranking power.

As far as the title attribute, it used to impact SEO, but based on my latest research, it’s unclear whether it still does today. But again, there are no clear downsides to using the title attribute, only upsides.

Alternative tooltip methods

You might need a more custom version of the built-in HTML tooltip/title attribute. In that case, you can use JavaScript and CSS to both time and style tooltips for different use cases. I’ll cover that useful skill in a future tutorial (it’s on my to-write list!).