content property on a pseudo-element like ::after or ::before, while using text-decoration: none to prevent the hover underline that browsers typically add to elements with titles.
The Default Browser Behavior
By default, the title attribute in HTML is designed exclusively for accessibility and supplementary information. When a user hovers their mouse cursor over an element with this attribute, the browser renders a small, floating box containing the text. This behavior is hardcoded into every major web browser and cannot be disabled directly via HTML alone. For many users, these tooltips are transient and disappear quickly, making them difficult to read or reference. Consequently, developers often need a way to make this information permanently visible on the page layout.
CSS Solution Using Pseudo-Elements
The most robust method to achieve this transformation relies on Cascading Style Sheets (CSS). You can target any element that possesses a title attribute using the attribute selector [title]. By applying styles to a pseudo-element such as ::after, you can extract the value of the title and render it as static text within the document flow.
element[title] {
position: relative;
}
element[title]::after {
content: attr(title);
display: block;
white-space: pre-wrap;
}In this approach, the attr(title) function tells the CSS engine to look at the title attribute of the selected element and return its string value. The display: block property ensures that the text appears below the original element, preventing it from overlapping other content. Using white-space: pre-wrap preserves line breaks if the title contains multiple lines, ensuring the formatting remains intact.
Handling Visual Conflicts
Simply adding the text via CSS may not be enough if the browser still attempts to style the element as a link or interactive component. Many browsers automatically apply a blue color and an underline to elements that have a title attribute, treating them as potential hyperlinks even if they are not. To ensure the text looks like standard paragraph content, you must override these default styles.
a[title], span[title], div[title] {
text-decoration: none;
color: inherit;
cursor: default;
}Setting text-decoration: none removes the underline. Setting cursor: default changes the mouse pointer back to a standard arrow instead of a hand icon, which signals to the user that the element is not clickable. This creates a seamless visual experience where the title text appears as part of the regular reading flow.
Alternative: Using JavaScript for Dynamic Content
If you need more control over how the text is displayed, or if you want to move the title text entirely out of the inline flow, JavaScript provides a programmatic alternative. You can iterate through all elements with a title attribute, create a new <span> element, set its inner text to the title value, and append it to the parent node.
document.querySelectorAll('[title]').forEach(function(el) {
var span = document.createElement('span');
span.className = 'visible-title';
span.textContent = el.getAttribute('title');
el.parentNode.insertBefore(span, el.nextSibling);
el.removeAttribute('title');
});This method allows you to completely remove the title attribute after copying the text, which prevents the tooltip from appearing ever again. It also gives you full control over the styling of the inserted text via CSS classes. However, this approach requires JavaScript to be enabled and executed before the page loads, whereas the CSS solution works instantly and does not rely on scripting.
Accessibility Considerations
While displaying title text visually improves readability, it is crucial to consider accessibility standards. Screen readers rely heavily on the title attribute to provide context about links and images. If you hide the attribute using CSS or remove it via JavaScript, you might deprive assistive technology users of important information.
To maintain compatibility, ensure that the visible text you generate matches the content of the title attribute exactly. Do not truncate or alter the meaning. Furthermore, avoid using the aria-hidden="true" attribute on the original element unless you have provided equivalent information elsewhere in the accessible tree. The goal is to enhance visibility for sighted users without degrading the experience for those using screen readers.
For related techniques involving dynamic content insertion, you may find Displaying Progress Bar Label Value Attribute with ::before Pseudo-Element useful, as it demonstrates similar principles for extracting values into the DOM.
Frequently Asked Questions
Does this method work for all HTML elements?
Yes, the CSS attr() function works on any element that has a title attribute, including <div>, <p>, <a>, and <img>. However, the visual result depends on the default display type of the element, so you may need to adjust margins or padding.
Will the tooltip still appear if I use CSS?
No, simply using CSS to display the text does not disable the native browser tooltip. The tooltip will still appear on hover unless you also use text-decoration: none and potentially pointer-events: none on the pseudo-element, or remove the attribute entirely with JavaScript.
How do I handle long titles that wrap poorly?
You can control wrapping by adjusting the max-width and overflow properties on the pseudo-element. Using white-space: normal allows text to wrap naturally within the container width, while white-space: nowrap forces it onto a single line.
Is there a performance impact on large pages?
The CSS approach has negligible performance impact as it is handled by the browser's rendering engine. The JavaScript approach iterates through the DOM, which can cause slight delays on very large pages with thousands of titled elements, so caching queries is recommended.
Can I style the visible title differently from the rest of the text?
Absolutely. Since the pseudo-element is a distinct CSS target, you can apply unique fonts, colors, background highlights, or borders specifically to the displayed title text without affecting the underlying element's appearance.