Rethinking Tooltips with Interest Invokers and Popover API - Martine Dowden - NDC Oslo 2026

Rethinking Tooltips with Interest Invokers and Popover API - Martine Dowden - NDC Oslo 2026

by Martine Dowden · View the channel on PSI

Applied Sciences & Engineering Computing & Cybersecurity UMComputer programmingUMWWeb programming
🎙 Martine Dowden 👥 229K 📅 October 7, 2026 ⏱ 44 min 👁 0 📄 tutorial 🧭 2026-10-07
Available in: English (current) Français

Keywords

tooltippopoverinterest invokeranchor positioningCSS

Summary

This talk by Martine Dowden, recorded at NDC Oslo 2026, explores modern approaches to implementing tooltips on the web. It begins by reviewing the historical method involving CSS and JavaScript for hover/focus behavior, positioning, and accessibility, highlighting issues like overflow and verbosity for screen readers. The presentation then introduces the Popover API, now at baseline browser support, which handles accessibility, interactivity, and top-layer rendering without custom JavaScript. Positioning is enhanced with anchor positioning and position-area, allowing fallback placement strategies. The talk also covers the allow discrete transition property for smooth animations, and explains the three popover types: auto, hint, and manual, each with distinct dismissal and coexistence behaviors. Interest Invokers are presented as a way to trigger popovers on hover/focus, and combining them with popover targets enables hybrid interactions. The speaker emphasizes the importance of unique IDs in component-based frameworks and reviews JavaScript methods like showPopover and hidePopover for programmatic control. Throughout, she provides code examples and notes on browser support, recommending polyfills for interest invokers where needed.

168 words

Critical Evaluation

Value of the Information & Strength of the Argument

The talk provides significant practical value by demonstrating how to reduce JavaScript overhead and improve accessibility using native web APIs. The argumentation is solid, supported by live code examples and clear explanations of trade-offs. The presenter honestly addresses limitations such as browser support and ID management, making the guidance actionable for developers. The structure progresses logically from problem to solution, with a strong emphasis on real-world application.

Scientific Rigor, Source Quality, Title Accuracy

The content is technically rigorous, with accurate references to MDN and current browser compatibility. The speaker cites official documentation and clearly distinguishes between baseline features and those with limited support. The title perfectly matches the content, and the talk stays on-topic throughout. The description provides minimal additional resources, but the talk itself is self-contained.

136 words

Title / Content Match

The title accurately reflects the content: it rethinks tooltip implementation using new web platform features.

Quality & Reliability

8/10

The talk is well-structured and technically accurate, referencing current APIs and their limitations. Presenter is a recognized expert in web development. Some features are still experimental, but the talk clearly states browser support and suggests polyfills.

Key Moments

Markers derived by PSI from the transcript: the creator did not define chapters.

Cited Sources

  • NDC Conferences — Conference organizer; provides upcoming events and resources.
  • NDC Oslo — Location of the recorded talk.

Concurring Sources

Contribution & Novelties

The talk offers a comprehensive, practical guide to modern tooltip implementation using the Popover API and Interest Invokers, showcasing reduced code complexity and improved accessibility. It uniquely demonstrates how to leverage native browser features to replace custom JavaScript solutions, while candidly discussing support limitations.

Pour aller plus loin :

  • Popover API - MDN — Official documentation for the Popover API, covering usage and browser support.
  • CSS anchor positioning - MDN — Reference for anchor positioning properties and functions.
  • @starting-style - MDN — CSS rule enabling transitions from display: none.
  • Interest invokers explanation (Chrome Developers) — Detailed introduction and rationale for Interest Invokers.

102 words

Radar Profile

The radar profile is balanced, with all scores around 8, indicating a talk that is informative, technically robust, and well-delivered. The slightly higher quality and reliability scores reflect the speaker's clear explanations and honest assessment of browser support.

Reliability 8/10