Tooltip

Preview

Usage

<span class="glass-tooltip-container">
  Hover over me
  <span class="glass-tooltip">This is a tooltip!</span>
</span>

Structure

Element / Class	Purpose
.glass-tooltip-container	Wrapper element (position: relative, cursor: help)
.glass-tooltip	The tooltip popup (hidden by default)

Behavior

• Hidden: visibility: hidden, opacity: 0, shifted 6px down
• Visible (on hover): Fades in, slides up to position, centered above the container
• Arrow: CSS ::after border trick pointing downward

CSS Details

Property	Value
Position	Absolute, centered above container (bottom: 100%, left: 50%)
Background	rgba(255,255,255,0.35) with thin blur
Border	1px solid var(--glass-border)
Border Radius	var(--glass-radius-sm) (8px)
Padding	0.4rem 0.85rem
Font	0.8rem, weight 500
White Space	nowrap
Z-index	100
Transition	Opacity + transform with spring easing
Arrow	5px border triangle pointing down