A tooltip with arrow built using pure HTML and CSS that includes a small pointer shape connecting the tooltip to its trigger element, helping users clearly understand which UI element the message refers to without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where visual association matters, such as form validation hints, feature explanations, interactive icons, or UI controls that need a clear directional link between the tooltip and the related element.
Implementation
The arrow indicator is created using CSS pseudo-elements and border-based shapes, while positioning and visibility are handled through relative layout and hover or focus states, keeping the structure lightweight and easy to reuse.
HTML
<div class="ss-tooltip">
Hover me
<span class="tooltip-arrow">Arrow tooltip</span>
</div>CSS
.ss-tooltip{
position:relative;
display:inline-block;
cursor:pointer;
}
.tooltip-arrow{
position:absolute;
bottom:125%;
left:50%;
transform:translateX(-50%) translateY(6px);
background:#08CB00;
color:#ffffff;
padding:6px 10px;
border-radius:6px;
font-size:12px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.tooltip-arrow::after{
content:'';
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
border:6px solid transparent;
border-top-color:#08CB00;
}
.ss-tooltip:hover .tooltip-arrow{
opacity:1;
transform:translateX(-50%) translateY(0);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses a directional arrow pointer
- Strengthens visual connection to the trigger
- Supports top, bottom, left, or right placement
- Designed for precise UI guidance
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.