A magnetic hint tooltip built with pure HTML and CSS that creates a subtle attraction effect between the trigger element and the tooltip, making hints feel naturally connected and gently guiding the user’s eye without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where gentle guidance is preferred over strict prompts, such as onboarding tips, feature discovery hints, micro-interactions around icons, or subtle UI assistance that should feel responsive rather than intrusive.
Implementation
The magnetic behavior is achieved using CSS transforms, hover-based offsets, and smooth transition timing, allowing the tooltip to slightly shift toward the trigger element while remaining lightweight and visually anchored.
HTML
<button class="tip-trigger">
Hover me
<span class="tooltip">Contextual insight appears here</span>
</button>CSS
.tip-trigger {
position: relative;
background: #BF124D;
color: #e5e7eb;
border: 1px solid #1e293b;
border-radius: 10px;
padding: 10px 14px;
cursor: pointer;
}
.tooltip {
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%) scale(.96);
background: #BF124D;
color: #f8fafc;
padding: 8px 12px;
border-radius: 10px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.tip-trigger:hover .tooltip {
opacity: 1;
transform: translateX(-50%) scale(1);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses a magnetic attraction-style motion
- Encourages discovery without forcing attention
- Creates a natural visual link to the trigger
- Designed for subtle, assistive UI feedback
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.