Global Attribute
The title attribute provides advisory information about an element, typically displayed as a tooltip when the user hovers over it. It’s commonly used to add extra context, descriptions, or explanations for elements.
< element title = " Descriptive text " > Content </ element >
Value Description textText that describes or provides additional information about the element
Interactive code playground requires JavaScript. Here's the code:
<p>
Hover over this
<abbr title="HyperText Markup Language">HTML</abbr>
abbreviation to see its full meaning.
</p>
<p>
The <dfn title="A layout system for arranging items in rows or columns">flexbox</dfn>
model makes CSS layouts much easier.
</p>
<button title="Click to save your changes">
💾 Save
</button>
Interactive code playground requires JavaScript. Here's the code:
<p>Learn more about web development:</p>
<nav>
<a href="#html" title="Learn the structure of web pages">HTML Guide</a> |
<a href="#css" title="Style and design your web pages">CSS Guide</a> |
<a href="#js" title="Add interactivity to your pages">JavaScript Guide</a>
</nav>
<div style="margin-top: 20px;">
<a href="https://example.com" title="Opens in a new window" target="_blank">
External Link ↗
</a>
</div>
Interactive code playground requires JavaScript. Here's the code:
<div class="toolbar">
<button title="Bold (Ctrl+B)" class="icon-btn">
<strong>B</strong>
</button>
<button title="Italic (Ctrl+I)" class="icon-btn">
<em>I</em>
</button>
<button title="Underline (Ctrl+U)" class="icon-btn">
<u>U</u>
</button>
<button title="Insert Link (Ctrl+K)" class="icon-btn">
🔗
</button>
<button title="Upload Image" class="icon-btn">
🖼️
</button>
</div>
<style>
.toolbar {
display: flex;
gap: 5px;
padding: 10px;
background: #f1f5f9;
border-radius: 6px;
}
.icon-btn {
width: 40px;
height: 40px;
border: 1px solid #cbd5e1;
background: white;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.icon-btn:hover {
background: #e2e8f0;
}
</style>
Interactive code playground requires JavaScript. Here's the code:
<div class="truncated-list">
<div class="item" title="This is a very long item name that has been truncated to fit in the available space">
This is a very long item name that has been...
</div>
<div class="item" title="Another extremely long description that cannot fit in one line and needs to be shortened">
Another extremely long description that...
</div>
<div class="item" title="Complete Product Name: Professional Web Development Toolkit Extended Edition">
Complete Product Name: Professional Web...
</div>
</div>
<style>
.truncated-list {
width: 300px;
background: #f8fafc;
padding: 15px;
border-radius: 6px;
}
.item {
padding: 10px;
margin: 5px 0;
background: white;
border: 1px solid #e2e8f0;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: help;
}
</style>
Interactive code playground requires JavaScript. Here's the code:
<div class="image-gallery">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect fill='%233b82f6' width='150' height='150'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='white' font-size='20'%3EPhoto 1%3C/text%3E%3C/svg%3E"
alt="Mountain landscape"
title="Mountain landscape at sunset - Taken in Rocky Mountains, Colorado, USA"
width="150"
height="150"
>
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect fill='%2310b981' width='150' height='150'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='white' font-size='20'%3EPhoto 2%3C/text%3E%3C/svg%3E"
alt="Ocean view"
title="Pacific Ocean at dawn - Captured from Big Sur, California"
width="150"
height="150"
>
</div>
<style>
.image-gallery {
display: flex;
gap: 10px;
padding: 20px;
}
.image-gallery img {
border-radius: 8px;
cursor: help;
}
</style>
Interactive code playground requires JavaScript. Here's the code:
<p>
Our <abbr title="Application Programming Interface">API</abbr>
supports both <abbr title="Representational State Transfer">REST</abbr>
and <abbr title="GraphQL Query Language">GraphQL</abbr>.
</p>
<p>
Files must be under 5<abbr title="Megabytes">MB</abbr> and in
<abbr title="Portable Network Graphics">PNG</abbr> or
<abbr title="Joint Photographic Experts Group">JPEG</abbr> format.
</p>
<style>
abbr {
text-decoration: underline dotted;
cursor: help;
}
</style>
Interactive code playground requires JavaScript. Here's the code:
<form>
<div class="field">
<label for="username">
Username
<span class="help" title="3-20 characters, letters and numbers only">ⓘ</span>
</label>
<input type="text" id="username" placeholder="Enter username">
</div>
<div class="field">
<label for="password">
Password
<span class="help" title="Must be at least 8 characters with uppercase, lowercase, and numbers">ⓘ</span>
</label>
<input type="password" id="password" placeholder="Enter password">
</div>
</form>
<style>
.field {
margin: 15px 0;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.help {
color: #64748b;
cursor: help;
font-size: 14px;
}
input {
width: 100%;
padding: 8px;
border: 2px solid #cbd5e1;
border-radius: 4px;
}
</style>
Interactive code playground requires JavaScript. Here's the code:
<table>
<thead>
<tr>
<th title="Product name">Product</th>
<th title="Current stock quantity">Stock</th>
<th title="Price in US Dollars">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td title="Wireless Bluetooth Headphones - Model WH-1000">Headphones</td>
<td title="24 units in stock">24</td>
<td title="$99.99 USD">$99.99</td>
</tr>
<tr>
<td title="USB-C Charging Cable - 6ft length">USB Cable</td>
<td title="156 units in stock">156</td>
<td title="$12.99 USD">$12.99</td>
</tr>
</tbody>
</table>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #e2e8f0;
}
th {
background: #f1f5f9;
font-weight: 600;
cursor: help;
}
td {
cursor: help;
}
</style>
<!-- Good: Brief and informative -->
< button title = " Save changes " > 💾 </ button >
< a href = " # " title = " Download PDF version " > Download </ a >
<!-- Avoid: Too verbose -->
< button title = " Click this button to save all of your changes to the database " > 💾 </ button >
<!-- Avoid: Title repeats visible text -->
< a href = " # " title = " Learn More " > Learn More </ a >
<!-- Better: Title adds new information -->
< a href = " # " title = " Opens documentation in new window " > Learn More </ a >
<!-- Or omit if no additional info -->
< a href = " # " > Learn More </ a >
<!-- Good: Adds context -->
< time datetime = " 2024-01-15 " title = " January 15, 2024 at 2:30 PM EST " >
< span title = " Based on 1,234 reviews " > ★★★★☆ 4.5 </ span >
<!-- Essential for icon-only buttons -->
< button title = " Delete item " > 🗑️ </ button >
< button title = " Edit details " > ✏️ </ button >
< button title = " Share " > 📤 </ button >
The title attribute is not accessible on images for screen readers:
<!-- Wrong: Title is not read by screen readers for images -->
< img src = " logo.png " title = " Company Logo " >
<!-- Correct: Use alt attribute -->
< img src = " logo.png " alt = " Company Logo " >
<!-- Optional: Both can be used together -->
< img src = " logo.png " alt = " Company Logo " title = " Click to return to homepage " >
Tooltips only appear on hover, making them inaccessible to keyboard users:
<!-- Problem: Keyboard users can't see the tooltip -->
< span title = " Additional information " > Help </ span >
<!-- Better: Use visible text or ARIA -->
< button aria-describedby = " help-text " > Submit </ button >
< div id = " help-text " > Click to submit the form </ div >
<!-- Or make it visible -->
< span > Help < small > (Additional information) </ small ></ span >
Tooltips don’t work well on touch devices:
<!-- Consider mobile users -->
< button title = " This won't show on mobile " >
<!-- Better: Use visible text or modals -->
< button onclick = " showInfo () " >
For accessibility, prefer ARIA attributes:
<!-- Title alone (not always accessible) -->
< button title = " Close dialog " > × </ button >
<!-- Better: Use aria-label -->
< button aria-label = " Close dialog " > × </ button >
<!-- Both can be used together -->
< button aria-label = " Close dialog " title = " Close (Esc) " > × </ button >
Interactive code playground requires JavaScript. Here's the code:
<div class="tooltip-demo">
<p title="Tooltip appears after a short delay (typically 0.5-1 second)">
Hover here and wait for the tooltip
</p>
<p title="This is a very long tooltip that demonstrates how browsers handle lengthy title text. Different browsers may display it differently, with varying widths and line wrapping behavior.">
Hover to see a long tooltip
</p>
</div>
<style>
.tooltip-demo p {
padding: 15px;
margin: 10px 0;
background: #f1f5f9;
border: 2px solid #cbd5e1;
border-radius: 6px;
cursor: help;
}
</style>
Tooltip appearance (font, color, size, timing) is controlled by the browser and cannot be styled with CSS . For custom tooltips, use JavaScript-based solutions.
For more control, create custom tooltips:
Interactive code playground requires JavaScript. Here's the code:
<div class="custom-tooltip-container">
<button class="has-tooltip" data-tooltip="This is a custom styled tooltip!">
Hover for Custom Tooltip
</button>
<button class="has-tooltip" data-tooltip="Tooltips can be styled with CSS">
Another Example
</button>
</div>
<style>
.custom-tooltip-container {
padding: 40px;
text-align: center;
}
.has-tooltip {
position: relative;
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
margin: 5px;
}
.has-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-5px);
background: #1e293b;
color: white;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
font-size: 14px;
}
.has-tooltip:hover::after {
opacity: 1;
}
</style>
The title attribute is supported by all browsers.
Browser Support Chrome All versions Firefox All versions Safari All versions Edge All versions
