Feedback
Popover
semantic HTML트리거 주변에 상호작용 가능한 콘텐츠를 표시합니다.
Live example
Build 284
Passed all checks.
Passed all checks.
<span data-standard-component="popover" class="standard-popover"><button type="button" aria-expanded="false" data-popover-trigger>Show details</button><span role="tooltip" hidden data-popover-panel><strong>Build 284</strong><br>Passed all checks.</span></span>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.2 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
menu가 아닌 일반 보조 패널로 노출하고 트리거의 expanded 상태와 panel 연결을 유지합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->