👀 Live Preview
Hover over the text below to see the tooltip:
Hover me for a title tooltip
HTML title Attribute
Overview
Introduction
The title attribute is a global HTML attribute that lets you provide advisory information about an element. On most elements, browsers show this text as a tooltip when the user hovers with a mouse.
It works on links, images, paragraphs, abbreviations, and many other elements. Do not confuse it with the <title> element in the document <head>—that sets the browser tab label and affects SEO.
What You’ll Learn
Tooltips
Hover text.
Global attr
Most elements.
vs <title>
Not the same.
abbr
Expansions.
JavaScript
el.title.
A11y limits
Not primary.
Fundamentals
Purpose of title
The primary purpose of the title attribute is to offer supplementary information displayed when a user hovers over an element (typically as a tooltip). It gives extra context without changing the visible page content.
Common uses include explaining abbreviated text on <abbr>, adding hints on icons or truncated labels, and naming embedded frames on <iframe title="..."> for accessibility.
Not for SEO
The title attribute does not improve search rankings. Use the <title> element in <head> for page titles in search results.
Foundation
📝 Syntax
Add title to any element with a text string:
title.html
<p title="This is a tooltip when you hover.">
Hover over this paragraph.
</p>Syntax Rules
- Global attribute — valid on nearly all HTML elements.
- Value is a plain text string (no HTML inside the attribute).
- Tooltips appear on hover for pointer users; behavior varies on touch devices.
- On
<iframe>,titlenames the frame for assistive technology (required for accessibility). - IDL property:
HTMLElement.title(empty string removes advisory text). - Do not duplicate visible link text in
titleon anchors.
Reference
💎 Values
The title attribute accepts a single string value—any text you want to show as advisory information:
title="Save your document"— Hint on a button or icon.title="HyperText Markup Language"— Expansion on<abbr>.title="Product photo: blue running shoes"— Extra detail on an image (not a substitute foralt).title="Customer support chat"— Name for an<iframe>.
title-values.html
<abbr title="World Health Organization">WHO</abbr>
<a href="/docs" title="Read the full documentation (PDF, 2 MB)">Docs</a>Cheat Sheet
⚡ Quick Reference
| Topic | Detail | Example |
|---|---|---|
| Format | Plain text string | title="Hint" |
| Display | Tooltip on hover | Mouse users |
| Scope | Global attribute | Most elements |
| JavaScript | element.title | Read/write string |
| Not the same as | <title> in head | Browser tab / SEO |
| iframe | Accessible name | Required for a11y |
Scope
Applicable Elements
| Element | Typical use of title | Notes |
|---|---|---|
<abbr> | Spell out abbreviation | Classic pattern |
<a>, <button> | Extra hint on hover | Don’t hide essential info |
<img> | Advisory note | Use alt for accessibility |
<iframe> | Frame description | Accessible name |
<p>, <span>, etc. | Tooltip text | Global attribute |
Compare
title attribute vs <title> element vs alt
| Feature | Purpose | SEO / A11y |
|---|---|---|
title attribute | Tooltip / advisory text | Not for SEO; limited a11y |
<title> element | Document name in tab | Important for SEO |
alt on img | Image replacement text | Essential for a11y |
aria-label | Accessible name | Reliable for screen readers |
Hands-On
Examples Gallery
Paragraph tooltip, abbreviation expansion, and dynamic JavaScript updates.
Example — paragraph with title
Basic tooltip on a paragraph:
title.html
<p title="This is a tooltip message when you hover over this paragraph.">
This is a paragraph with a title attribute.
</p>How It Works
The title attribute on the paragraph provides a tooltip when the user hovers over it. The visible text stays unchanged.
Example — abbreviation expansion
A practical use on <abbr>:
abbr-title.html
<p>
The <abbr title="HyperText Markup Language">HTML</abbr>
title attribute shows the full form on hover.
</p>How It Works
Readers see “HTML” but hovering reveals the full phrase. Include the expansion in visible text when possible for keyboard-only users.
Dynamic Values with JavaScript
Update tooltip text at runtime:
dynamic-title.html
<p id="dynamicParagraph">
This paragraph will have a dynamically set title attribute.
</p>
<script>
document.getElementById("dynamicParagraph").title = "Updated tooltip message.";
</script>How It Works
In this script, the title for the paragraph with id dynamicParagraph is set after the page loads. Useful when tooltip content depends on live data or user state.
A11y
♿ Accessibility
- Do not rely on title alone — Many screen readers ignore or inconsistently announce
titletooltips. Put essential information in visible text. - Use
alton images — Nottitle— for meaningful image descriptions. - Always set
titleon iframes — It provides the accessible name of the embedded frame. - Avoid duplicate link text — Repeating the same words in
titleon<a>adds noise for some assistive tech. - Keyboard and touch users — Tooltips may not appear without a mouse; never hide critical instructions in title only.
🧠 How title Works
1
Author adds text
title string.
HTML
2
User hovers
Pointer device.
Input
3
Browser shows tip
Native tooltip.
UI
=
Extra context
On hover.
Compatibility
Browser Support
The title attribute is universally supported. All major browsers display native tooltips for title on hover (timing and styling vary).
Universal · Fully supported
Works everywhere
Chrome, Firefox, Safari, and Edge all honor the title attribute.
100% Modern browsers
Google Chrome All versions
SupportedMozilla Firefox All versions
SupportedApple Safari All versions
SupportedMicrosoft Edge All versions
Supportedtitle attribute Excellent
Bottom line: Tooltip support is reliable; do not depend on it for critical accessibility information.
Pro Tips
💡 Best Practices
✅ Do
- Use concise, relevant tooltip text
- Put expansions on
<abbr>withtitle - Always set
titleon<iframe>elements - Keep essential info in visible page content
- Test tooltip behavior across browsers
❌ Don’t
- Confuse
titleattribute with<title>element - Expect title to improve SEO
- Replace
alton images withtitle - Write long, intrusive tooltip paragraphs
- Hide instructions only in tooltips
Wrap Up
Conclusion
The title attribute is a useful way to offer supplementary information through native tooltips without cluttering visible content. Applied thoughtfully on abbreviations, icons, and frames, it improves clarity for pointer users.
Remember the limits: it is not for SEO, not a replacement for accessible names, and not visible to all users. Pair it with visible text and proper semantic HTML for the best experience.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about title
Bookmark these when adding tooltips.
5
Core concepts 01
Tooltip
Hover text
Purpose 02
Global
Most elements
Scope 03
Not <title>
Different feature
Clarify 04
el.title
JavaScript
Dynamic 05
Not for SEO
Advisory only
Limits❓ Frequently Asked Questions
It provides advisory text, usually shown as a tooltip on hover.
No. The attribute adds tooltips. The
<title> element in <head> sets the browser tab title.No. Search engines use the document
<title> element, not body element title attributes.Yes. Assign to
element.title, for example p.title = "New hint".No. Use
alt for accessible image descriptions. title is optional advisory text only.It names the embedded frame so screen reader users know what the iframe contains.
Try a tooltip yourself
Hover over the paragraph in the editor to see the title attribute in action.
About the author
5 people found this page helpful