Floating Hint Tooltip

A floating hint tooltip built with pure HTML and CSS that appears slightly detached from its trigger element, giving the impression of a small helper message hovering nearby without relying on JavaScript or external libraries.

Usage

This component is well suited for situations where short, assistive text should be visible without crowding the UI, such as feature tips, inline explanations, icon hints, or instructional cues in compact layouts.

Implementation

The floating effect is created using CSS absolute positioning, transform offsets, and soft transitions, allowing the tooltip to appear gently above or beside its trigger while maintaining a lightweight and reusable structure.

HTML

<div class="tooltip-float">
  <button class="tooltip-float__trigger">Hover</button>
  <span class="tooltip-float__bubble">Contextual hint</span>
</div>

<div class="tooltip-float">
  <button class="tooltip-float__trigger">Hover</button>
  <span class="tooltip-float__bubble">Contextual hint</span>
</div>

CSS

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

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

.tooltip-float__bubble {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  font-size: 11px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 14px 30px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

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

@media (prefers-color-scheme: dark) {
  .tooltip-float__bubble {
    background: #020617;
    color: #e5e7eb;
    box-shadow: 0 16px 34px rgba(0,0,0,0.85);
  }
}

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

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

.tooltip-float__bubble {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  font-size: 11px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 14px 30px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

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

@media (prefers-color-scheme: dark) {
  .tooltip-float__bubble {
    background: #020617;
    color: #e5e7eb;
    box-shadow: 0 16px 34px rgba(0,0,0,0.85);
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Appears slightly detached for a floating feel
• Keeps hints visually light and unobtrusive
• Easy to reposition for different layouts
• Designed for brief, supportive messages

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.