CSS Anchor Positioning: Tooltip và popover không cần JS

Positioning tooltip relative to trigger button. Dropdown menu dưới navigation item. Popover cạnh form field. Tất cả những thứ này đều cần JavaScript để tính toán position — cho đến khi có CSS Anchor Positioning.

Vấn đề hiện tại

Để position một tooltip chính xác, bạn cần:

• JavaScript đo kích thước trigger element.
• Tính toán position dựa trên viewport bounds.
• Handle scroll, resize events.
• Flip logic khi element gần edge.

Libraries như Floating UI (Popper.js successor) tồn tại vì bài toán này phức tạp. CSS Anchor Positioning giải quyết native.

Cách hoạt động

/* Khai báo anchor */
.trigger-button {
  anchor-name: --my-tooltip;
}

/* Position tooltip relative to anchor */
.tooltip {
  position: fixed;
  position-anchor: --my-tooltip;
  
  /* Đặt tooltip phía trên button, center horizontally */
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% -0.5rem;
  
  /* Styling */
  background: var(--gray-900);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Auto-flip khi không đủ space */
.tooltip {
  position-try-fallbacks: flip-block, flip-inline;
}

anchor() function references position values của anchor element. position-try-fallbacks tự flip tooltip khi gần viewport edge — tính năng mà libraries JavaScript phải implement hàng trăm dòng code.

Dropdown menu thực tế

.nav-item {
  anchor-name: --nav-dropdown;
}

.dropdown-menu {
  position: fixed;
  position-anchor: --nav-dropdown;
  
  /* Đặt ngay dưới nav item */
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 0.25rem;
  
  /* Popover behavior */
  min-width: anchor-size(width);
  
  /* Fallback positions */
  position-try-fallbacks: 
    --above,
    flip-inline;
}

@position-try --above {
  bottom: anchor(top);
  top: auto;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

anchor-size(width) đảm bảo dropdown ít nhất rộng bằng trigger. @position-try cho phép define custom fallback positions.

Kết hợp với Popover API

Anchor Positioning kết hợp tuyệt vời với HTML Popover API (popover attribute). Popover handle show/hide logic, Anchor Positioning handle vị trí — cả hai đều không cần JavaScript.

Browser support

Chrome/Edge đã ship. Firefox và Safari đang implement. Vì đây là progressive enhancement, bạn có thể dùng với fallback — tooltip vẫn hiển thị, chỉ không auto-position.

Kết

CSS Anchor Positioning loại bỏ một trong những lý do phổ biến nhất để dùng JavaScript trong UI — positioning elements relative to other elements. Kết hợp với Popover API, bạn có thể build tooltips, dropdowns, popovers hoàn toàn declarative.