팝오버 = 힌트

Keith Cirkel
Mason Freed
Mason Freed
X GitHub

게시: 2025년 2월 26일

Chrome 133에서는 새로운 모드인 popover="hint"를 도입하여 기존 팝오버 기능을 기반으로 합니다. 이 브라우저 관리 모드를 사용하면 도움말과 유사한 일시적인 플로팅 요소를 간편하게 만들 수 있는 새로운 스택 컨텍스트를 사용할 수 있습니다. 설계 유연성을 유지하면서 개발자 작업을 줄입니다.

소개 및 역사

Chrome 114에서 도입된 Popover API를 사용하면 메뉴 및 도움말과 같이 액세스 가능한 플로팅 UI를 만들 수 있습니다. 기본적으로 popover="auto"는 Popover API 소개에 설명된 대로 추가 스크립트 없이 밝은 색상 닫기 기능과 포커스 관리를 자동으로 처리합니다. popover="auto" 팝오버를 열면 popover="auto"가 있는 다른 모든 조상 외 팝오버가 닫히므로 가장 적절한 작업을 실행하는 인체공학적 API가 됩니다.

다른 팝오버를 닫는 팝오버

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

이 예시에서 팝오버 2를 열면 팝오버 1이 닫힙니다. popover="auto"는 한 번에 하나의 팝오버만 열 수 있기 때문입니다.

이 동작은 메뉴와 대화상자에 적합하지만 여러 유형의 플로팅 UI가 공존해야 하는 경우 문제가 발생할 수 있습니다. 예를 들어 popover="auto"를 모두 사용하는 메뉴와 도움말이 충돌할 수 있으며, 이 경우 도움말을 열면 메뉴가 닫힙니다. 이는 흔하지 않은 상황처럼 보일 수 있지만, 최신 애플리케이션 스타일 UI에서는 자주 발생합니다. 예를 들어 github.com의 헤더에 있는 메뉴는 메뉴와 도움말 모두에 팝오버를 사용하므로 특정 조건에서 둘 다 동시에 표시할 수 있습니다.

열린 메뉴
GitHub 메뉴

이 문제를 해결하는 한 가지 방법은 스크립팅으로 팝오버를 완전히 제어할 수 있는 popover="manual"를 도움말 요소에 사용하는 것입니다. 하지만 이렇게 하려면 Popover API가 처리하도록 설계된 작업인 스택 동작, 조용히 닫기, 포커스 관리를 다시 구현해야 합니다. 이에 따라 누락된 기능을 제공하도록 API를 확장하는 방법을 모색하게 되었습니다.

개발자 조사를 통해 일반적인 비슷한 이미지 배치 컨텍스트를 두 가지로 확인했습니다.

  • 영구 UI: 예를 들어 메뉴와 대화상자가 여기에 해당합니다.
  • 일시적인 UI: 예를 들어 마우스 오버 카드와 도움말이 여기에 해당합니다.

두 가지를 모두 수용하기 위해 popover="hint"는 popover="auto"와는 다른 두 번째 스택을 도입하여 툴팁이 표시되더라도 메뉴가 열려 있게 합니다. 이 접근 방식은 여러 UI 유형에 여러 스택 컨텍스트를 도입하는 대신(기본적으로 z-index를 다시 발명하는 것) 지속형 UI(auto) 및 일시적 UI(hint)라는 두 가지 대략적인 카테고리만 정의하여 더 간단하게 유지합니다. 이렇게 하면 유연성과 팝오버 사용 전과 동일한 문제가 다시 발생하는 것을 방지하는 균형을 유지할 수 있습니다.

새 값의 동작

popover="auto"와 popover="hint" 모두 조용히 닫기를 지원합니다. 즉, 사용자가 외부를 클릭하거나 키보드에서 Esc를 누르면 자동으로 닫힙니다. 이 점에서 두 스타일은 동일합니다.

다른 팝오버를 강제로 숨기는 경우 popover="auto"는 열릴 때 다른 모든 auto 및 hint 팝오버를 닫아 한 번에 하나의 팝오버만 활성 상태가 되도록 합니다 (중첩된 팝오버는 예외이며 아래에서 설명). 반면 popover="hint"는 다른 hint 팝오버만 강제로 숨겨 메뉴와 도움말이 열려 있고 공존할 수 있도록 합니다.

가장 큰 차이점은 중첩 동작입니다. popover="auto"는 중첩을 지원하므로 하위 팝오버가 다른 상위 팝오버 내에서 열려 있을 수 있습니다. popover="hint"에는 별도의 '스택'이 사용되는 특수한 중첩 동작이 있습니다. hint 팝오버가 auto 팝오버 내에 있으면 auto 스택에 결합하여 문맥 그룹화를 유지합니다. 즉, 다른 auto 또는 hint 팝오버로 인해 강제로 숨겨질 때까지 열려 있습니다. 이렇게 하면 도움말이 다른 메뉴나 팝오버를 방해하지 않는 직관적인 동작이 제공됩니다.

마지막으로 매우 다른 사용 사례의 경우 항상 popover="manual"가 있습니다. popover="manual"에는 이러한 동작이 내장되어 있지 않으므로 필요한 정확한 기능과 동작을 정의할 수 있습니다.

popover="auto" popover="hint" popover="manual"
밝은 색상 닫기 예 예 아니요
강제 숨기기: 관련 없는 auto 및 hint 관련 없는 hint Nothing
중첩: 예 특별 (이전에 설명됨) 해당 사항 없음: 조명 닫기 없음

마우스 오버 트리거

일반적인 UX 패턴은 도움말과 호버 카드가 마우스 오버 트리거되는 것입니다. 관심 있는 요소 위로 마우스를 일정 시간 동안 가져가면 마우스 오버 카드가 표시됩니다. 현재 이 동작은 JavaScript를 통해 구현해야 합니다(예: mouseenter 및 mouseleave 이벤트의 리스너 추가). 하지만 호버 트리거를 선언적으로 만드는 또 다른 API인 Interest Invokers API가 개발 중입니다.

이 API는 아직 개발 중이지만 일반적인 개념은 여러 요소 유형에 interesttarget라는 속성을 추가하여 마우스 오버 트리거 동작을 부여하는 것입니다.

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

위의 HTML을 사용하면 <a> 링크 위로 마우스를 가져가면 my-hovercard 팝오버가 자동으로 표시됩니다. 포인터를 해당 요소에서 옮기면 팝오버가 숨겨집니다. JavaScript 없이도 가능합니다.

예

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}
도움말이 있는 버튼
실시간으로 사용해 보세요.

이 예에서는 popover="hint"을 사용하여 기본 도움말을 빌드합니다. 이 도움말은 마우스로 버튼 위로 마우스를 가져가면 버튼에 관한 추가 정보를 제공합니다. 마우스 오버 활성화는 mouseenter 및 mouseleave의 이벤트 핸들러에서 간단한 0.5초 지연으로 제공합니다. 이 예에서는 처리되지 않는 몇 가지 세부정보가 있습니다.

  1. 팝오버 자체에 마우스를 가져가도 트리거 요소에서 마우스를 옮겨 팝오버를 닫을 수 있습니다. 따라서 팝오버에서 텍스트를 복사하거나 붙여넣을 수 없습니다.
  2. '데봉'은 없습니다. 지연 시간이 경과하기 전에 버튼에서 빠르게 마우스를 옮겨도 버튼에 마우스를 가져가면 팝오버가 트리거됩니다. 이 경우 도움말이 빠르게 열렸다 닫혔다 '플리커링'합니다.
  3. 이 예에서는 전혀 액세스할 수 없습니다. 마우스를 사용하지 않는 사용자는 도움말 콘텐츠에 액세스할 수 없습니다.

이러한 단점은 JavaScript를 추가하여 해결할 수 있습니다. 예를 들어 팝오버의 키보드 기반 활성화를 지원하려면 focus (또는 keydown 및 keyup) 이벤트 핸들러)를 추가해야 합니다. 도움말 텍스트에 액세스할 수 있도록 올바르게 처리해야 하는 사항에 관한 설명은 사라 히글리의 이 유용한 블로그 게시물을 참고하세요. 이러한 문제와 그 밖의 모든 문제는 Interest Invokers API에 의해 선언적으로 자동으로 처리됩니다.

자세히 알아보기

자세한 내용은 기능 설명 또는 HTML 사양을 참고하세요.