Sometimes you might want to show extra information when someone hovers over a word or phrase.
For that, we can use the <abbr> tag. It stands for “abbreviation” and shows a small popup (tooltip) in the browser when you hover over the text.
Let’s try it out.
In the same HTML, let’s add some extra info to “Her films” so it shows up when the user hovers (do follow what I say all along):
<p><abbr title="American actress Scarlett Johansson made her debut in the 1994 comedy-drama.">Her films</abbr> as a leading actress have grossed over $15.1 billion worldwide, making her the highest-grossing lead actor in history.</p>Now when you hover Her films, you will see the information.
Now, when you hover over Her films, that extra information will pop up as a tooltip.
What we did here was wrap Her films in an <abbr> tag and then add the extra info inside the title attribute.
So far, we’ve only used tags. This is the first time we’re also using an attribute, which gives extra details about the tag.
So, what’s an attribute?
An attribute is just extra information you give to a tag. It changes how the tag behaves or what it shows.
Think of it like this:
- 1A tag is the basic command (for example,
<abbr>says “this is an abbreviation”). - An attribute is like a setting that adds more detail — for example, what should show up when someone hovers over the text.
In our case:
<abbr title="Extra info shown when you hover">Her films</abbr><abbr>is the tag.title="Extra info shown when you hover"is the attribute.- The value of the title attribute is what actually appears in the tooltip.
Assignment
On the first line of your page, when you hover over Scarlett Ingrid Johansson, it should show a tooltip.
1. Wrap Scarlett Ingrid Johansson in <abbr> and add a title attribute. You can write any short info you like inside the title.
Expected Output
2. Add one more tooltip anywhere else you like on the page. It could be on New York City, Black Widow, Lost in Translation, or any other text you choose.
Solution
1. (In first line)
<p><abbr title="American actress and singer">Scarlett Ingrid Johansson</abbr> (/dʒoʊˈhænsən/; born November 22, 1984) is an American actress and singer.</p>2. (In Early Life Section)
<p>She was born in <abbr title = "The largest city in the United States.">New York City</abbr> and grew up with a strong interest in performing from a young age.</p>⬅️ Previous Lesson Next Lesson ➡️