A glass label tooltip built with pure HTML and CSS that shows short text labels on a translucent, frosted surface, creating a modern glass-like appearance while keeping the background softly visible.
Usage
This component is well suited for interfaces where compact explanations or labels are needed without cluttering the layout, such as icon descriptions, form field hints, feature tags, or UI elements that benefit from subtle contextual text.
Implementation
The glass effect is produced using CSS backdrop-filter, semi-transparent backgrounds, and small text containers, while hover or focus states control the tooltip’s visibility with lightweight transitions.
HTML
<div class="tooltip-glass">
<span class="tooltip-glass__trigger">Hover</span>
<span class="tooltip-glass__content">Glassy tooltip</span>
</div>CSS
.tooltip-glass {
width: 200px;
position: relative;
display: flex;
justify-content: center;
}
.tooltip-glass__trigger {
font-size: 18px;
color: #093FB4;
}
.tooltip-glass__content {
position: absolute;
top: 120%;
padding: 0.4rem 0.6rem;
border-radius: 12px;
background: rgba(2, 6, 23, 0.75);
backdrop-filter: blur(6px);
color: #e5e7eb;
font-size: 11px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 150ms ease, transform 150ms ease;
white-space: nowrap;
}
.tooltip-glass:hover .tooltip-glass__content {
opacity: 1;
transform: translateY(0);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses glass-style translucent label design
- Displays short, focused text content
- Keeps background visually present through blur
- Designed for minimal, inline UI 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.