← Back to gallery
CSS

Tooltip Anchor Positioning Top Layer

A popover tooltip anchored via the CSS anchor positioning API with @position-try fallbacks for edge collisions, falling back to absolute positioning in unsupported browsers.

Duration
1s
Resolution
1440×900
Format
CSS
tooltippopoveranchor-positioningtop-layerposition-try

Interaction / anchor() / popover

Tooltip anchor positioning top layer

Reimplements a tooltip that tethers to its trigger via the CSS anchor positioning API, with @position-try fallbacks for edge collisions and a supports() fallback to absolute positioning.

above trigger — 0.20s reveal · 8px offset
Click to open the help center. Keyboard users can press ? anywhere.

Hover or focus the button.

Default tooltip placement

Above Trigger

Tooltip anchored above a button using CSS anchor positioning, with a @position-try fallback that flips below when the top edge clips.

  • top
  • anchor()
  • flip-block
Moves the thread to Archive. Stays searchable.

Hover or focus the button.

Inline-end placement

Right Side

Tooltip anchored to the right of its trigger for sidebar icons, with automatic flip to the left when the viewport clips the right edge.

  • right
  • sidebar
  • flip-inline
Paste the key from your dashboard. It is stored encrypted locally.

Hover or focus the button.

Dropdown-affordance tooltip

Below Trigger

Tooltip anchored below its trigger, with the arrow pointing up — good for form labels where the helper should sit near the next expected focus target.

  • bottom
  • form
  • arrow up

Tooltip inspector

Above Trigger

Click to open the help center. Keyboard users can press ? anywhere.

Hover the trigger to see the reveal delay.

Delay
0.20s
Offset
8px

Most common default — above the control so the pointer path down toward the trigger does not obscure the tip.

css
.tip-trigger {
  anchor-name: --trigger;
  position: relative;
}

.tip-panel {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(top);
  left: anchor(center);
  translate: -50% calc(-100% - 8px);
  background: #0f172a;
  color: #f1f5f9;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease 0.20s;
}

.tip-trigger:hover + .tip-panel,
.tip-trigger:focus-visible + .tip-panel {
  opacity: 1;
}

@position-try --flip-below {
  top: anchor(bottom);
  translate: -50% 8px;
}

.tip-panel {
  position-try-fallbacks: --flip-below;
}

/* Fallback for browsers without anchor positioning */
@supports not (anchor-name: --x) {
  .tip-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tip-panel { transition-delay: 0s; }
}