An icon tooltip built with pure HTML and CSS that attaches explanatory text to a small icon, allowing interfaces to stay visually clean while still offering on-demand clarification without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where space is limited but guidance is still necessary, such as form labels, settings panels, dashboards, or feature lists where icons can represent help, info, or warnings.
Implementation
The tooltip behavior is created using CSS relative positioning, hover or focus states, and compact text containers, enabling the tooltip to appear near the icon while keeping the overall layout lightweight and flexible.
HTML
<div class="ss-tooltip">
ⓘ
<span class="tooltip-icon">Helpful info</span>
</div>CSS
.ss-tooltip{
position:relative;
display:inline-flex;
align-items:center;
cursor:pointer;
font-size:14px;
}
.tooltip-icon{
position:absolute;
left:110%;
top:50%;
transform:translateY(-50%) translateX(-4px);
background:#08CB00;
color:#ffffff;
padding:4px 8px;
border-radius:5px;
font-size:11px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.ss-tooltip:hover .tooltip-icon{
opacity:1;
transform:translateY(-50%) translateX(0);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed specifically for icon-triggered hints
- Keeps interfaces clean and uncluttered
- Supports small, concise text content
- Optimized for tight UI layouts
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.