Floating Blur Tooltip

A floating blur tooltip built with pure HTML and CSS that displays short helper text on a softly blurred background, creating a lightweight overlay that feels visually separated from the page without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where visual softness improves readability, such as modern dashboards, design-focused UIs, or feature hints that should appear gently without sharp edges or heavy contrast.

Implementation

The blur effect is achieved using CSS backdrop-filter, semi-transparent backgrounds, and subtle positioning offsets, allowing the tooltip to appear suspended above the interface while maintaining clarity of the text.

HTML

<div class="tooltip-wrap">
  <button class="tooltip-trigger">?</button>
  <span class="tooltip-blur">Helpful info</span>
</div>

<div class="tooltip-wrap">
  <button class="tooltip-trigger">?</button>
  <span class="tooltip-blur">Helpful info</span>
</div>

CSS

.tooltip-wrap {
  position: relative;
  width: 200px;
}

.tooltip-trigger {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.tooltip-blur {
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.tooltip-wrap:hover .tooltip-blur {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .tooltip-blur {
    background: rgba(31,41,55,0.8);
    color: #e5e7eb;
  }
}

.tooltip-wrap {
  position: relative;
  width: 200px;
}

.tooltip-trigger {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.tooltip-blur {
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.tooltip-wrap:hover .tooltip-blur {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .tooltip-blur {
    background: rgba(31,41,55,0.8);
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses a blurred floating surface
• Separates hint text from busy backgrounds
• Produces a soft, modern overlay style
• Designed for visually smooth UI themes

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.