v135 · html / ux
API Docs Tooltips
A fake API reference page where each method has a interestfor button. Hover or focus the button and the browser fires the "interest" action on the target popover — no JavaScript hover/focus events needed. Compare with the legacy JS approach.
checking interestfor attribute…
The
interestfor attribute on <button> and <a> (Chrome 135) causes the browser to show the target element when the user "shows interest" — hover on desktop, long-press on mobile, or focus via keyboard. The browser manages the timing and platform differences automatically.
API reference — hover / focus the ⓘ buttons
Navigator API
navigator.geolocation.getCurrentPosition(success, error?, options?)
Retrieves the device's current geographic position asynchronously.
→ void | fires successCallback({ coords, timestamp })
navigator.clipboard.readText() → Promise<string>
Reads text from the system clipboard. Requires clipboard-read permission.
→ Promise<string>
navigator.vibrate(pattern: number | number[]) → boolean
Triggers device vibration. Pattern is ms on, ms off, ms on… Passing 0 cancels.
→ boolean — true if supported and pattern accepted
navigator.sendBeacon(url, data?) → boolean
Queues a small HTTP POST to be sent even on page unload. Non-blocking.
→ boolean — false if data exceeds quota
Comparison
interestfor (Chrome 135)
<button interestfor="pop-geolocation">ⓘ</button>
<div id="pop-geolocation" popover>
…tooltip content…
</div>
/* Zero JavaScript! Browser handles:
- hover timing
- focus events
- long-press on mobile
- keyboard navigation */
Legacy JS approach
const btn = document.getElementById('info-btn');
const pop = document.getElementById('pop-el');
btn.addEventListener('mouseenter', () => {
showTooltip(pop, btn);
});
btn.addEventListener('mouseleave', hideTooltip);
btn.addEventListener('focus', showTooltip);
btn.addEventListener('blur', hideTooltip);
// + mobile long-press handling
// + keyboard dismiss
// + positioning logic