Text Displayed When A Pointer Is Placed Over A Hyperlink

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. No workaround needed.

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.

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.

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.

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 title attribute
• 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.

Why It Matters

You might think: nobody reads those things anyway, so why bother? Still, 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. That said, this means it can provide extra context that isn't visible on the page. For someone using a keyboard to manage, 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.

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.

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. Because of that, 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. Consider this: 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.

This is one of the biggest limitations of the standard title attribute: it was designed for mouse interaction, not touch.

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. Here's the thing — 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.

Want to learn more? We recommend what is 2 and 1/3 as an improper fraction and i must go down to the sea again for further reading.

Want to learn more? We recommend what is 2 and 1/3 as an improper fraction and i must go down to the sea again for further reading.

Common Mistakes People Make

We're talking about 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.

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.

Using Tooltips for Critical Information

This is a big one. 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.

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. 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. That said, 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.

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. For a download link, file type and size. For an external link, where it goes. Now, 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. " That's helpful. The tooltip should describe what the link does* or contains*. That's why a link that says "Pricing" might have a tooltip like "See current plans and what's included. A tooltip that just says "Pricing" is redundant.

Keep It Short and Specific

A good tooltip is a handful of words. "PDF, 1.On the flip side, 2MB" is better than "This link will open a downloadable PDF document that is approximately 1. Because of that, 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.

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.

Does the title attribute help with SEO?

Not in a meaningful way. 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.