A basic tooltip built with pure HTML and CSS that shows short descriptive text when a user hovers over or focuses on an element, providing straightforward context without animations, special effects, or external libraries.
Usage
This component is best suited for simple informational hints, such as labeling icons, explaining buttons, or clarifying form fields where only a small amount of guidance is needed and visual complexity should be kept to a minimum.
Implementation
The tooltip is implemented using CSS relative positioning and visibility toggling, allowing the text container to appear near its trigger element through hover or focus states while maintaining a lightweight and easy-to-understand structure.
HTML
<div class="ss-tooltip">
Hover me
<span class="tooltip-text">Tooltip text</span>
</div>CSS
.ss-tooltip{
position:relative;
display:inline-block;
cursor:pointer;
}
.tooltip-text{
position:absolute;
bottom:125%;
left:50%;
transform:translateX(-50%);
background:#111827;
color:#fff;
padding:6px 10px;
border-radius:6px;
font-size:12px;
opacity:0;
white-space:nowrap;
pointer-events:none;
transition:.2s;
}
.ss-tooltip:hover .tooltip-text{
opacity:1;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Focuses on simple text display
- Avoids animation or decorative effects
- Easy to customize for different layouts
- Designed for quick, practical hints
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.