Angular 팝오버·호버 카드 컴포넌트

팝오버는 버튼 옆에 열리는 작은 패널로, 필터, 짧은 폼, 색상 선택기처럼 상호작용하는 요소에 사용합니다. 네이티브 popover="auto"이므로 Esc 키나 바깥 클릭으로 브라우저가 닫고 포커스를 되돌리며, 탭 순서에서 트리거 바로 뒤에 둡니다.

호버 카드는 리치 툴팁입니다. 잠시 마우스를 올려 두면 열리고, 키보드로 포커스하면 바로 열리며, 트리거를 설명합니다. 포인터가 카드 위로 옮겨 가도 열린 상태를 유지하므로 텍스트를 읽고 선택할 수 있습니다.

둘 다 공간이 없으면 반대쪽으로 뒤집히고, 화면 안에 머물며, 페이지가 스크롤되면 트리거를 따라갑니다.

필터

안에 폼이 있는 팝오버입니다. arrow는 트리거를 가리키는 화살표를 달고, hide()는 코드에서 팝오버를 닫습니다.

Showing open, in review issues.

이름에 마우스를 올리거나 Tab 키로 이동해 보십시오. 카드가 링크를 설명하므로, 스크린 리더는 이름 다음에 카드를 읽어 줍니다.

Reviewed by @ada and @grace.

side와 align은 열리는 위치를 정하며, start와 end는 쓰기 방향을 따릅니다. enter와 motion은 등장하는 방식을 정합니다.