A fade in tooltip built with pure HTML and CSS that reveals short explanatory text through a gentle opacity transition, creating a calm and non-intrusive way to display contextual information without relying on JavaScript or external libraries.
Usage
This component is well suited for interfaces where soft visual feedback is preferred, such as form field hints, icon descriptions, accessibility labels, or UI elements that require subtle clarification without sudden motion or distraction.
Implementation
The fade in behavior is implemented using CSS opacity changes, transition timing, and hover or focus states, allowing the tooltip to appear gradually while keeping the structure lightweight and easy to reuse.
HTML
<div class="ss-tooltip">
Hover here
<span class="tooltip-fade">Smooth fade tooltip</span>
</div>CSS
.ss-tooltip{
position:relative;
display:inline-block;
cursor:pointer;
}
.tooltip-fade{
position:absolute;
bottom:125%;
left:50%;
transform:translateX(-50%) translateY(6px);
background:#334155;
color:#ffffff;
padding:6px 12px;
border-radius:8px;
font-size:12px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .3s ease, transform .3s ease;
}
.ss-tooltip:hover .tooltip-fade{
opacity:1;
transform:translateX(-50%) translateY(0);
}
Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses opacity based reveal animation
- Minimizes visual disruption
- Ideal for quiet, supportive UI cues
- Designed for smooth, subtle interaction
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.