Feedback
Tooltip
semantic HTMLhover와 focus에 짧은 보조 정보를 표시합니다.
Live example
Copies a shareable link
<span data-standard-component="tooltip" class="standard-popover"><button type="button" aria-describedby="tooltip-panel">Share</button><span id="tooltip-panel" role="tooltip" hidden data-popover-panel>Copies a shareable link</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
트리거는 aria-describedby로 tooltip과 연결되며 hover와 keyboard focus에서 열리고 Escape 또는 focus 이탈로 닫힙니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->