Glow Tooltip
A copy-paste tooltips component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
TooltipsHTMLCSSany framework
Glowing tooltip
Copy into your project
HTML
<div class="nuda-glow-tooltip-wrap">
<button class="nuda-glow-tooltip__trigger" aria-describedby="glow-tip-1">
Hover me
</button>
<div class="nuda-glow-tooltip" role="tooltip" id="glow-tip-1">
Glowing tooltip
</div>
</div>CSS
/* Glow Tooltip
Tooltip with a subtle accent-colored glow on hover.
Customize: --tooltip-glow-color, --tooltip-bg */
.nuda-glow-tooltip-wrap {
position: relative;
display: inline-block;
}
.nuda-glow-tooltip__trigger {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #ccc;
padding: 0.45rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
cursor: pointer;
}
.nuda-glow-tooltip {
--tooltip-glow-color: #e4ff54;
--tooltip-bg: #1a1a1a;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--tooltip-bg);
border: 1px solid rgba(228, 255, 84, 0.2);
color: #ccc;
font-size: 0.75rem;
padding: 0.4rem 0.75rem;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, box-shadow 0.3s ease;
box-shadow: 0 0 0 rgba(228, 255, 84, 0);
}
.nuda-glow-tooltip-wrap:hover .nuda-glow-tooltip {
opacity: 1;
box-shadow:
0 0 12px rgba(228, 255, 84, 0.25),
0 0 4px rgba(228, 255, 84, 0.1);
}
@media (prefers-reduced-motion: reduce) {
.nuda-glow-tooltip {
transition: none;
}
}How to use Glow Tooltip
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.