A top tooltip built with pure HTML and CSS that appears above its trigger element, presenting short contextual text while preserving the surrounding layout and avoiding overlap with nearby content.
Usage
This component is ideal for interfaces where space below an element is limited, such as navigation bars, footer controls, dense button groups, or inline actions where upward placement improves visibility.
Implementation
The top placement is achieved using CSS absolute positioning, negative vertical offsets, and transform-based centering, ensuring the tooltip aligns neatly above the trigger while remaining lightweight and reusable.
HTML
<div class="ss-tooltip">
Info
<span class="tooltip-top">Tooltip on top</span>
</div>CSS
.ss-tooltip{
position:relative;
display:inline-block;
cursor:pointer;
}
.tooltip-top{
position:absolute;
bottom:100%;
left:50%;
transform:translateX(-50%) translateY(6px);
margin-bottom:8px;
background:#2563eb;
color:#ffffff;
padding:6px 10px;
border-radius:6px;
font-size:12px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .2s, transform .2s;
}
.ss-tooltip:hover .tooltip-top{
opacity:1;
transform:translateX(-50%) translateY(0);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Renders above the trigger element
- Prevents obstruction of content below
- Keeps layout predictable in tight UI areas
- Designed for upward-oriented 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.