v142 · dom

Rich Tooltip Gallery

Beyond simple text: interestfor targets a popover element, which can contain any HTML — styled cards, code blocks, stat tables, images with captions, or achievement badges. Hover or focus any trigger to see each variant.

Feature detection: checking…

Note: interestfor is not supported in this browser. The tooltips will not appear on hover — use Chrome 142+ to see them. The popover HTML structure is correct and visible in the source.

Hover or tab-focus each trigger. All popovers are plain HTML targeted by interestfor — no JavaScript for show/hide.

1 · plain text

Saves your work without publishing. Drafts are private and can be edited any time.

2 · rich card

Paul Kinlan

Developer advocate, Chrome DevRel. Writes about the web platform and progressive enhancement.

3 · code snippet

CSS.escape()

CSS.escape() — MDN

CSS.escape('🦊item')
// → "\\1F98A item"

querySelector(
  CSS.escape(tagName)
);

4 · stats table

Metric	Score	Rating
LCP	1.2 s	Good
INP	88 ms	Good
CLS	0.14	Needs work

5 · image + caption

[ screenshot preview ]

Homepage redesign — 14 May 2026 · before/after comparison.

6 · achievement badge

🏆

Top Contributor

Awarded for 50+ accepted answers.
Earned March 2026.

7 · icon button strip

Edit this item

Delete permanently — cannot be undone

Created 2026-05-14 · Last modified today

8 · keyboard shortcut hint

Publish now
Keyboard shortcut: Ctrl + Enter

<!-- Plain text tooltip — zero JS -->
<button interestfor="my-tip">Save to drafts</button>
<div popover id="my-tip">
  Saves without publishing. Drafts stay private.
</div>

<!-- Rich card — same attribute, richer content -->
<button interestfor="profile-tip">@paul_kinlan</button>
<div popover id="profile-tip">
  <div class="header">Paul Kinlan</div>
  <div class="body">Developer advocate, Chrome DevRel.</div>
  <div class="footer">joined 2009</div>
</div>

<!-- The interestfor attribute is all you need.
     No JS for open/close/focus/keyboard/touch-delay. -->

see also