Glow Edge Tooltip

A glow edge tooltip built with pure HTML and CSS that emphasizes short messages using a soft glowing outline, making helpful information stand out without covering surrounding interface elements or relying on JavaScript.

Usage

This component is well suited for interfaces where visual emphasis is needed without large motion, such as highlighting important icons, warning hints, feature callouts, or interactive elements that require subtle but noticeable guidance.

Implementation

The glow effect is created using CSS box-shadow, gradient borders, and controlled opacity, allowing the tooltip’s edges to emit a soft light while keeping the content area clean and readable.

HTML

<div class="tooltip-glow">
  <button class="tooltip-glow__trigger">Info</button>
  <span class="tooltip-glow__content">Additional context</span>
</div>

<div class="tooltip-glow">
  <button class="tooltip-glow__trigger">Info</button>
  <span class="tooltip-glow__content">Additional context</span>
</div>

CSS

.tooltip-glow {
  width: 200px;
  position: relative;
  text-align: center;
}

.tooltip-glow__trigger {
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.tooltip-glow__content {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  font-size: 11px;
  background: #ffffff;
  color: #111827;
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.15),
    0 8px 20px rgba(99,102,241,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.tooltip-glow__trigger:hover + .tooltip-glow__content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-color-scheme: dark) {
  .tooltip-glow__content {
    background: #020617;
    color: #e5e7eb;
    box-shadow:
      0 0 0 1px rgba(129,140,248,0.35),
      0 8px 22px rgba(129,140,248,0.45);
  }
}

.tooltip-glow {
  width: 200px;
  position: relative;
  text-align: center;
}

.tooltip-glow__trigger {
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.tooltip-glow__content {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  font-size: 11px;
  background: #ffffff;
  color: #111827;
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.15),
    0 8px 20px rgba(99,102,241,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.tooltip-glow__trigger:hover + .tooltip-glow__content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-color-scheme: dark) {
  .tooltip-glow__content {
    background: #020617;
    color: #e5e7eb;
    box-shadow:
      0 0 0 1px rgba(129,140,248,0.35),
      0 8px 22px rgba(129,140,248,0.45);
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses a glowing edge outline for emphasis
• Keeps tooltip body minimal and readable
• Works well in dark or high-contrast UIs
• Designed for attention without motion

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.