From a95d8637d4b6b8d3cbaab7e17f84734152ff44ac Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Fri, 17 Oct 2025 13:28:40 +0100 Subject: [PATCH] Add clarifying tooltip nesting note Added note about tooltip nesting for better fallback in unsupported browsers. --- files/en-us/web/api/popover_api/using/index.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/files/en-us/web/api/popover_api/using/index.md b/files/en-us/web/api/popover_api/using/index.md index 5c5201e11426f3e..e6f7c296e74d4ce 100644 --- a/files/en-us/web/api/popover_api/using/index.md +++ b/files/en-us/web/api/popover_api/using/index.md @@ -306,6 +306,9 @@ The sub-menu popovers work fine as they are, opening when the toolbar buttons ar
Tooltip C
``` +> [!NOTE] +> In the demo [source code](https://github.com/mdn/dom-examples/tree/main/popover-api/popover-hint), the tooltips are nested inside the popover control buttons. This is because it provides a better fallback in browsers that don't support CSS anchor positioning — the `hint` popovers appear next to their associated control buttons rather than somewhere else entirely. + To control the showing/hiding, we need to use JavaScript. First of all, we grab references to the `hint` popovers and the control buttons in two separate {{domxref("NodeList")}}s using {{domxref("Document.querySelectorAll()")}}: ```js