How to Configure Strict CSS Interest-Target Attributes in Google Chrome

Delivering accessible hover cards and tooltips on the web has historically required fragile JavaScript event tracking across mouseenter, mouseleave, focusin, and focusout event listeners. Within Google Chrome, the emerging OpenUI and CSS Working Group specification introduces the declarative interesttarget HTML attribute. This capability allows buttons and links to trigger associated floating popovers automatically on user interest (hover and keyboard focus) with zero JavaScript, complete keyboard accessibility, and native escape-key dismissal.

The Declarative Interest Target Architecture

The interesttarget attribute establishes a semantic relationship between an invoker element and a target popover:

<!-- Invoker button declaring interest relationship -->
<button type="button" 
        interesttarget="developer-info-card" 
        class="user-avatar-trigger">
  Profile Details
</button>

<!-- Target popover card -->
<div id="developer-info-card" popover="hint" class="hover-interest-card">
  <h4>Developer Profile</h4>
  <p>Active contributor to Open Source repositories and cloud architecture.</p>
</div>

Unlike popovertarget (which triggers on explicit click activation), interesttarget activates when the user demonstrates intent: hovering with a pointing device for a brief dwell threshold or navigating onto the invoker via keyboard Tab keys.

Configuring Strict Dwell Timers and Popover Type Hint

The companion popover type popover="hint" is designed specifically for rich tooltips and hovercards. Unlike popover="auto" (which dismisses all other open popovers), a hint popover can nest comfortably within or coexist alongside an active auto popover menu without forcing its closure:

/* Anchor the hint card to the invoker */
.hover-interest-card {
  position: fixed;
  position-anchor: --developer-trigger;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
  margin-top: 6px;
  
  opacity: 0;
  transition: opacity 0.15s ease-in-out, display 0.15s allow-discrete;
  pointer-events: auto; /* Allows cursor to traverse into the card */
}

.hover-interest-card:popover-open {
  opacity: 1;
}

.user-avatar-trigger {
  anchor-name: --developer-trigger;
}

Auditing Interest Targets in Chrome DevTools

Google Chrome provides specialized DevTools tooling to audit interest relationships:

1. Open DevTools (F12) and navigate to the Elements panel.
2. Locate the invoker element bearing the interesttarget attribute. Notice the reference link arrow pointing to the popover ID.
3. Inspect the popover container. Verify the presence of popover="hint".
4. Hover over the invoker in the viewport. Observe the popover being dynamically promoted to the #top-layer stack in the DevTools Elements tree.
5. Press the Escape key to verify instantaneous dismissal and proper focus restoration.