Ever hovered over a link and noticed that little tooltip popping up with a preview of where the link goes? That's not magic. It's a small but genuinely useful bit of web design that's been around for decades, and most people never think twice about it — until it goes wrong Still holds up..
Short version: it depends. Long version — keep reading.
The text that appears when you point at a hyperlink is called tooltip text, and in HTML it's written using the title attribute. It's one of those quiet features that doesn't get attention when it works, but suddenly becomes very obvious when a site either uses it poorly or skips it entirely And that's really what it comes down to..
What Is Tooltip Text on a Link
In plain language, tooltip text is a short description attached to a hyperlink (or any HTML element, really) that shows up when a user hovers their cursor over it. The browser reads this description from the title attribute in the HTML and displays it in a small floating box near the pointer It's one of those things that adds up..
So if you see code like this:
<a href="https://example.com" title="Visit our homepage for more details">Example</a>
The words "Visit our homepage for more details" are the tooltip text. When you hover over the word "Example" with your mouse, that little yellow or gray box appears with those words inside it Small thing, real impact..
Where Else Tooltips Show Up
Links aren't the only place you'll find this kind of hover text. Tooltip behavior exists on:
- Images with the
titleattribute - Form fields, where the tooltip often shows validation hints
- Icons in a user interface
- Abbreviations using the
<abbr>tag, where the full term is revealed on hover - Custom JavaScript-driven tooltips that designers build themselves
But on plain text hyperlinks, the title attribute is the default, built-in method. No extra code or libraries required Less friction, more output..
Why It Matters
You might think: nobody reads those things anyway, so why bother? Honestly, that's a fair point. Most users do ignore tooltips. But the people who do use them tend to rely on them heavily, and removing or ignoring them can quietly hurt usability.
Accessibility Considerations
For users with screen readers, the title attribute on a link is read aloud when the link receives focus. Consider this: this means it can provide extra context that isn't visible on the page. On the flip side, for someone using a keyboard to handle, a tooltip on a link like "Read the 2024 annual report (PDF, 4MB)" tells them something important before they activate the link. They can decide whether to follow it based on that information Most people skip this — try not to..
So while sighted mouse users might skim past tooltips, keyboard and screen reader users often depend on them as a core part of how they understand a page Not complicated — just consistent..
Previewing Before Clicking
The hover preview gives people a chance to verify where a link will take them without committing to the click. On a page full of external links, for example, a tooltip saying "opens in a new tab" or "links to a government website" helps users make a fast judgment call.
Trust and Transparency
A clear, honest tooltip builds a small amount of trust. If someone hovers over a link that says "Download our free guide" and the tooltip says "(PDF, 2MB, no email required)," they know exactly what they're getting. Compare that to a vague or missing tooltip, and you can feel the difference in confidence.
How It Actually Works
The mechanism is simpler than most people think. Here's the breakdown.
The HTML Side
You add the title attribute directly to your anchor tag:
<a href="https://example.com/article" title="Read the full article on our blog">Full article</a>
The browser handles everything else. And there's no JavaScript needed for the basic version. When the user's pointer enters the bounds of the link, after a short delay (usually around a second), the browser displays the title in a native tooltip.
Timing and Behavior
Different browsers handle tooltips slightly differently. The delay before appearance can vary, the styling of the tooltip box is usually browser-controlled, and on touch devices, tooltips often don't appear at all because there's no hover state. On mobile, a tap might briefly trigger a tooltip, but it's inconsistent across devices and operating systems That's the part that actually makes a difference..
This is one of the biggest limitations of the standard title attribute: it was designed for mouse interaction, not touch Not complicated — just consistent..
Custom Tooltips vs. Native
Web designers sometimes replace the native tooltip with a custom one built in CSS and JavaScript. Custom tooltips can be styled, animated, and made to work on touch devices. Because of that, they're common in modern web apps and design systems. But for straightforward content sites, the native title attribute is still perfectly fine and a lot less work.
Common Mistakes People Make
It's where things go sideways, and where I think most guides on the subject fall short.
Stuffing Keywords Into the Title Attribute
Back in the early days of SEO, some people thought the title attribute contributed to search rankings. It doesn't, in any meaningful way. Stuffing descriptive keywords into link tooltips in hopes of boosting SEO is wasted effort at best, and at worst it makes the user experience worse Worth knowing..
Writing Tooltips That Repeat the Link Text
If your link text already says "Read the 2024 annual report," then a tooltip that says "Click here to read the 2024 annual report" adds nothing. Good tooltip text supplements* the link text, it doesn't echo it Small thing, real impact..
Using Tooltips for Critical Information
This is a big one. Here's the thing — tooltips disappear, they're inconsistent on mobile, and some users never see them. If a piece of information is genuinely important — like a warning that a link opens a large file or goes to an external site — that information should be visible in the link text itself, not hidden in a hover-only tooltip Easy to understand, harder to ignore..
Ignoring the Mobile Experience
Because touch devices don't reliably trigger hover states, a tooltip built around the title attribute is essentially invisible to a large portion of your audience. And if the information matters, put it in the visible link text. If it doesn't matter that much, a tooltip is fine as a nice extra.
Overly Long Tooltips
The title attribute doesn't have a strict character limit, but practically speaking, tooltips are small boxes with limited space. On top of that, a tooltip that runs for two full sentences gets truncated or wrapped awkwardly, depending on the browser. Keep them short. A few words to a short clause is the sweet spot Small thing, real impact..
What Actually Works
After all that, here's what I'd suggest if you're building or editing a page with links.
Match the Tooltip to the User's Intent
Think about what someone hovering over the link actually wants to know. And for a download link, file type and size. For an external link, where it goes. For an abbreviation, the full term. The tooltip should answer a question, not just fill space.
Write Tooltips That Add Information
The link text describes what the link is. So a link that says "Pricing" might have a tooltip like "See current plans and what's included. Which means " That's helpful. The tooltip should describe what the link does* or contains*. A tooltip that just says "Pricing" is redundant Easy to understand, harder to ignore..
Keep It Short and Specific
A good tooltip is a handful of words. 2MB" is better than "This link will open a downloadable PDF document that is approximately 1."PDF, 1.Consider this: 2 megabytes in size. " You get the idea.
Don't Rely on Them
Use tooltips as a supplement, not a crutch. The page should still make sense to a user who never sees a single tooltip — because a meaningful slice of your visitors won't The details matter here..
FAQ
What is the text that appears when you hover over a link called?
It's called tooltip text, and in HTML it's set using the title attribute on the anchor tag. The browser displays it automatically when the pointer rests on the link.
Can you style the tooltip text on a link?
Not when using the standard title attribute — the appearance is controlled by the browser. If you want custom styling, you'd need to build a tooltip with CSS and JavaScript instead.
Do tooltips work on mobile phones?
Inconsistently. Most touch devices don't have a real hover state, so the native tooltip may never appear. Some mobile browsers show a brief tooltip on long-press, but it's not reliable. For mobile users, important information should be in the link text itself Most people skip this — try not to..
Worth pausing on this one Not complicated — just consistent..
Does the title attribute help with SEO?
Not in a meaningful way. In practice, google has stated that the title attribute is weighted very lightly, if at all, for ranking purposes. It's better to think of it as a usability feature than an SEO one.
Should every link have a tooltip?
No.
