An inline context tooltip built with pure HTML and CSS that appears directly alongside or within surrounding text, providing immediate clarification without pulling the user’s attention away from the current reading flow.
Usage
This component is ideal for content-heavy interfaces where terms or actions need quick clarification, such as documentation pages, form labels, data tables, or instructional layouts where explanations should stay close to the related text.
Implementation
The inline behavior is implemented using CSS relative positioning, small offset containers, and state-based visibility, allowing the tooltip to expand naturally within the text area while remaining lightweight and reusable.
HTML
<span class="tooltip-inline">
Hover me
<span class="tooltip-inline__content">
Inline helper text
</span>
</span>CSS
.tooltip-inline {
position: relative;
display: inline-flex;
align-items: center;
font-size: 12px;
color: #6366f1;
cursor: help;
}
.tooltip-inline__content {
position: absolute;
left: 50%;
top: 125%;
transform: translateX(-50%) scale(0.96);
transform-origin: top center;
max-width: 160px;
width: max-content;
padding: 0.4rem 0.6rem;
font-size: 11px;
line-height: 1.4;
color: #111827;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease;
word-wrap: break-word;
text-align: left;
z-index: 10;
}
.tooltip-inline:hover .tooltip-inline__content {
opacity: 1;
transform: translateX(-50%) scale(1);
}
.tooltip-inline__content::before {
content: "";
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #ffffff;
}
@media (hover: none) {
.tooltip-inline__content {
transition: none;
}
}
@media (prefers-color-scheme: dark) {
.tooltip-inline__content {
background: #111827;
color: #f9fafb;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.tooltip-inline__content::before {
border-bottom-color: #111827;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Stays aligned with surrounding text
- Preserves reading flow and layout structure
- Suitable for definitions and micro-explanations
- Designed for text-centric interfaces
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.