HTML Basics

Tooltips & Abbreviations

⏱ 5 min read📖 Beginner

The <abbr> tag lets you add extra information to any text on your page. When someone hovers over it, a small tooltip appears with the details you added.

You have probably seen this before without even noticing it.

You are reading something on a website and you hover over a word or phrase. A small popup appears with a little extra information. You did not click anything. You did not go anywhere. You just moved your mouse over it and something showed up.

Try hovering over her name in the card below and see what happens.

👀 Here is what you see on the Wikipedia page

Nadia

Nadia (born 1988) is an American software engineer, web developer, educator, and content creator. With over 10 years of professional experience in web development, she has become one of the most influential voices in tech education.

That little popup is called a tooltip. And you can add one to any text on your page with just one tag.

The abbr Tag

Here is what it looks like:

<abbr title="Software engineer and coding teacher">Nadia</abbr>

Two things are happening here:

<abbr> is the tag that wraps around the text
title is an attribute that holds the tooltip text
The value inside the quotes is what actually appears in the tooltip when someone hovers

What is an Attribute

This is a good moment to talk about attributes properly. You have seen them before with src on images. But let us make sure the idea is clear.

A tag is the basic instruction. It tells the browser what something is.

An attribute is extra information you add to that tag. It changes how the tag behaves or what it shows.

Think of it like ordering coffee. The tag is "coffee." The attributes are "large, oat milk, no sugar." The tag tells the browser what you want. The attributes tell it exactly how you want it.

In our case:

<abbr> is the tag
title="..." is the attribute
The value inside the quotes is what actually appears in the tooltip

💡

Attributes are always written inside the opening tag. You can learn more in the HTML Attributes article.

Adding a Tooltip to the Nadia Page

Let us add one to the Nadia page. Say we want to show a little extra info when someone hovers over "New York City":

Or on her name at the very top of the page:

Hover over the text and the tooltip pops up. Clean, subtle, and really useful when you want to add context without cluttering the page.

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.