Tooltip position

position: absolute;
top | right | bottom | left: value;

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: #1f2937;
  color: white;
  border-radius: 4px;
  white-space: nowrap;
}

Note Absolute positioning removes the element from the document flow and positions it relative to the nearest positioned ancestor (one with position: relative, absolute, fixed, or sticky). If none exists, it positions relative to the viewport.

.anchor {
  anchor-name: --name;
}
.tooltip {
  position: absolute;
  position-anchor: --name;
  top: anchor(bottom);
  left: anchor(center);
}

.trigger {
  anchor-name: --trigger;
}

.popover {
  position: absolute;
  position-anchor: --trigger;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  margin-bottom: 8px;

  /* Fallback if not enough space above */
  position-try-fallbacks: flip-block;
}

Note Anchor positioning lets you position elements relative to other elements anywhere in the DOM without a shared parent. position-try-fallbacks automatically repositions (flips) when the element would overflow the viewport. This replaces JavaScript-based tooltip/popover positioning libraries.