Published on Makemychance.com
Tooltips are small UI elements that display helpful text when users hover or tap on an element. They improve UX without adding clutter — and with just a few lines of CSS, you can create clean, modern tooltips for any website.
🔍 What Is a Tooltip?
A tooltip is a small popup text that appears on hover, focus, or tap.
Great for icons, buttons, forms, and feature explanations.
🧩 The Easiest Tooltip (HTML Only)
<button title="Click to submit">Submit</button>
✔ Super quick
✘ Can't customize the style
🎨 Custom CSS Tooltip (Modern UI)
HTML
<div class="tooltip">
Hover me
<span class="tooltip-text">This is a tooltip</span>
</div>
CSS
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip .tooltip-text {
visibility: hidden;
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: 0.3s ease;
white-space: nowrap;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
📌 Tooltip Positions
- Top (default)
- Bottom
- Left
- Right
Just adjust top, left, bottom, or transform values.
🛈 Tooltip with Arrow
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
border: 5px solid transparent;
border-top-color: #333;
transform: translateX(-50%);
}
📱 Tooltip on Mobile?
Since there's no hover on mobile:
✔ Show tooltip on click
✔ Use an info icon (i)
✔ Add a small JS toggle if needed
🛑 Common Mistakes
❌ Too much text
❌ Tooltip covering the element
❌ Bad contrast
❌ No mobile alternative
Keep it simple and readable.
🔗 Helpful References
- MDN Tooltip Basics https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
- CSS-Tricks Tooltip Guide https://css-tricks.com/css-tooltips/
🚀 Final Note
Tooltips are tiny but powerful UX boosters. With simple CSS, you can create clean, smooth, and accessible tooltips that fit perfectly into any modern UI.
Top comments (0)