Tooltips are small text popups that appear when users hover over an element. They help display additional information without cluttering the interface. The best part is that you can create tooltips in HTML without using JavaScript.
Easiest Way: Using the title Attribute
The quickest way to add a tooltip is by using the title attribute.
<button title="Click to submit the form">
Submit
</button>When users hover over the element, the browser automatically displays the tooltip.
<a href="#" title="Go to homepage">Home</a>Limitations of the title Attribute
- Cannot be styled
- Tooltip position is browser-controlled
- Limited accessibility support
- Not reliable on mobile devices
Custom Tooltip Using HTML and CSS (No JavaScript)
HTML Markup
<span class="tooltip">
Hover me
<span class="tooltip-text">This is a custom tooltip</span>
</span>Live Example
Hover me
This is a custom tooltip
Accessibility-Friendly Tooltip
To improve accessibility, you can use aria-label or aria-describedby.
<span class="tooltip" aria-describedby="tip1">
Username
<span id="tip1" class="tooltip-text">
Username must be unique
</span>
</span>Mobile-Friendly Considerations
Hover-based tooltips do not work well on touch devices.Always ensure important information is visible without relying on tooltips.
Common Mistakes to Avoid
Using JavaScript for Simple Tooltips
<span onclick="alert('Tooltip')">Hover</span>JavaScript is unnecessary for simple tooltip behavior and may affect accessibility.
Hiding Critical Information
Tooltips should enhance content, not replace essential information.
SEO Tip
- Tooltips are mainly for user experience
- Avoid hiding important keywords inside tooltips
- Keep main content visible to search engines
