Components / Surfaces and motion / Hover intent
M2 · Surfaces and motion New
Hover intent
Details stay hidden until the pointer dwells 220 ms within 4 px. A fast pass does not reveal them.
<div data-hover-zone tabindex="0">
<p>Quiet record</p>
<p class="sub">Hidden until hover.</p>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- Extra detail would crowd the idle state.
- A glance past the row should not flash the detail.
When not to use
- The detail is required to complete the task.
- Touch is the only pointer. Put the detail behind a button.
Usage
<div data-hover-zone tabindex="0">
<p>Quiet record</p>
<p class="sub">Hidden until hover.</p>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| dwell | 220 ms | 220 ms | How long the pointer must settle. |
| slop | 4 px | 4 px | Movement beyond this restarts the dwell. |
| data-hover-panel | region | hidden | The revealed details. |
Keyboard
| Key | Action |
|---|---|
| Tab | Focus reveals the details immediately. |
| Shift Tab | Leaves the zone and hides them. |
Accessibility
- Keyboard users do not wait 220 ms.
- The revealed fields are a definition list.
- The idle sentence stays available to pointer users before the dwell.
Motion
- Dwell uses --dwell, 220 ms.
- No animation on the reveal itself.
Pattern origin
Pattern type: a reveal after a 220 ms dwell, with 4 px of pointer slop.