From f48d78036c8e3a1d533e5b13d941ac48e5f8bead Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Thu, 28 Aug 2025 10:39:48 +0100
Subject: [PATCH 1/3] Improve compat notes and behavior on popover-hint demo

---
 popover-api/popover-hint/index.css  | 28 ++++++++++---
 popover-api/popover-hint/index.html | 64 ++++++++++++++++++-----------
 2 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/popover-api/popover-hint/index.css b/popover-api/popover-hint/index.css
index a6543952..0b048fea 100644
--- a/popover-api/popover-hint/index.css
+++ b/popover-api/popover-hint/index.css
@@ -5,7 +5,7 @@
 }
 
 html {
-  font-family: sans-serif;
+  font-family: system-ui;
   height: 100%;
   overflow: hidden;
 }
@@ -14,20 +14,21 @@ body {
   height: inherit;
   background: #ccc;
   margin: 0;
-}
-
-#wrapper {
-  height: inherit;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+#wrapper {
+  position: relative;
+  width: 60%;
+  max-width: 500px;
+}
+
 /* Button bar styling */
 
 #button-bar {
   height: 48px;
-  width: 30%;
   min-width: 300px;
   padding: 8px;
   border-radius: 6px;
@@ -36,6 +37,7 @@ body {
   display: flex;
   justify-content: space-around;
   gap: 10px;
+  z-index: 1;
 }
 
 /* Button styling */
@@ -61,6 +63,7 @@ body {
 [popover="auto"] {
   inset: unset;
   position: absolute;
+  bottom: 0;
   bottom: calc(anchor(top) + 20px);
   justify-self: anchor-center;
   margin: 0;
@@ -126,6 +129,15 @@ body {
   margin: 0;
   padding: 16px;
   box-shadow: 1px 1px 3px #999;
+  z-index: -1;
+}
+
+.help-para p {
+  margin: 0;
+}
+
+.help-para p:first-child {
+  margin-bottom: 1rem;
 }
 
 @media (max-width: 640px) {
@@ -133,4 +145,8 @@ body {
     width: auto;
     right: 16px;
   }
+
+  #wrapper {
+    width: 90%;
+  }
 }
diff --git a/popover-api/popover-hint/index.html b/popover-api/popover-hint/index.html
index 6955ab2d..6abf50b4 100644
--- a/popover-api/popover-hint/index.html
+++ b/popover-api/popover-hint/index.html
@@ -31,32 +31,48 @@
           Menu C
         </button>
       </section>
-    </div>
-
-    <p class="help-para">
-      Press the buttons to show the auto popovers. Hover or focus the buttons to
-      show the hint popovers. When an auto popover is shown, you can show the
-      hint popovers without hiding it. See
-      <a
-        href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#using_hint_popover_state"
-        >Using "hint" popover state</a
-      >
-      for more information. Note that in non-supporting browsers, the position
-      of the popovers is broken.
-    </p>
+      <div id="submenu-1" popover="auto">
+        <button>Option A</button><br /><button>Option B</button>
+      </div>
+      <div id="submenu-2" popover="auto">
+        <button>Option A</button><br /><button>Option B</button>
+      </div>
+      <div id="submenu-3" popover="auto">
+        <button>Option A</button><br /><button>Option B</button>
+      </div>
 
-    <div id="submenu-1" popover="auto">
-      <button>Option A</button><br /><button>Option B</button>
-    </div>
-    <div id="submenu-2" popover="auto">
-      <button>Option A</button><br /><button>Option B</button>
-    </div>
-    <div id="submenu-3" popover="auto">
-      <button>Option A</button><br /><button>Option B</button>
+      <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
+      <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
+      <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
     </div>
 
-    <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
-    <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
-    <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
+    <div class="help-para">
+      <p>
+        Press the buttons to show the auto popovers. Hover or focus the buttons
+        to show the hint popovers. When an auto popover is shown, you can show
+        the hint popovers without hiding it. See
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#using_hint_popover_state"
+          >Using "hint" popover state</a
+        >
+        for more information.
+      </p>
+      <p>
+        Note that this demo uses both hint popovers and CSS anchor positioning.
+        Browsers that don't support the former will experience different tooltip
+        behavior. Browsers that don't support the latter will not see the menus
+        and tooltips appear in the correct position relative to each button on
+        the button bar. Check browser support for
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover#browser_compatibility"
+          >hint popovers</a
+        >
+        and
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/position-anchor#browser_compatibility"
+          >anchor-positioning</a
+        >.
+      </p>
+    </div>
   </body>
 </html>

From 5348364414db1541126c631fa6dd41d0d7db1c99 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Thu, 18 Sep 2025 11:39:52 +0100
Subject: [PATCH 2/3] Updates for pepelsbey review comments

---
 popover-api/popover-hint/index.css  |  6 +++---
 popover-api/popover-hint/index.html | 29 ++++++++++++++++-------------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/popover-api/popover-hint/index.css b/popover-api/popover-hint/index.css
index 0b048fea..c0852854 100644
--- a/popover-api/popover-hint/index.css
+++ b/popover-api/popover-hint/index.css
@@ -20,7 +20,6 @@ body {
 }
 
 #wrapper {
-  position: relative;
   width: 60%;
   max-width: 500px;
 }
@@ -37,7 +36,8 @@ body {
   display: flex;
   justify-content: space-around;
   gap: 10px;
-  z-index: 1;
+  z-index: 2;
+  position: relative;
 }
 
 /* Button styling */
@@ -129,7 +129,7 @@ body {
   margin: 0;
   padding: 16px;
   box-shadow: 1px 1px 3px #999;
-  z-index: -1;
+  z-index: 1;
 }
 
 .help-para p {
diff --git a/popover-api/popover-hint/index.html b/popover-api/popover-hint/index.html
index 6abf50b4..f807b026 100644
--- a/popover-api/popover-hint/index.html
+++ b/popover-api/popover-hint/index.html
@@ -17,6 +17,8 @@
           Menu A
         </button>
 
+        <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
+
         <button
           popovertarget="submenu-2"
           popovertargetaction="toggle"
@@ -24,26 +26,27 @@
           Menu B
         </button>
 
+        <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
+
         <button
           popovertarget="submenu-3"
           popovertargetaction="toggle"
           id="menu-3">
           Menu C
         </button>
-      </section>
-      <div id="submenu-1" popover="auto">
-        <button>Option A</button><br /><button>Option B</button>
-      </div>
-      <div id="submenu-2" popover="auto">
-        <button>Option A</button><br /><button>Option B</button>
-      </div>
-      <div id="submenu-3" popover="auto">
-        <button>Option A</button><br /><button>Option B</button>
-      </div>
 
-      <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
-      <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
-      <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
+        <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
+
+        <div id="submenu-1" popover="auto">
+          <button>Option A</button><br /><button>Option B</button>
+        </div>
+        <div id="submenu-2" popover="auto">
+          <button>Option A</button><br /><button>Option B</button>
+        </div>
+        <div id="submenu-3" popover="auto">
+          <button>Option A</button><br /><button>Option B</button>
+        </div>
+      </section>
     </div>
 
     <div class="help-para">

From 3933009ca7be6556db16a853ae93974072b829d6 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Fri, 17 Oct 2025 12:21:44 +0100
Subject: [PATCH 3/3] Implement Vadim suggestion

---
 popover-api/popover-hint/index.css  | 1 -
 popover-api/popover-hint/index.html | 9 +++------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/popover-api/popover-hint/index.css b/popover-api/popover-hint/index.css
index c0852854..68e6c9f7 100644
--- a/popover-api/popover-hint/index.css
+++ b/popover-api/popover-hint/index.css
@@ -63,7 +63,6 @@ body {
 [popover="auto"] {
   inset: unset;
   position: absolute;
-  bottom: 0;
   bottom: calc(anchor(top) + 20px);
   justify-self: anchor-center;
   margin: 0;
diff --git a/popover-api/popover-hint/index.html b/popover-api/popover-hint/index.html
index f807b026..48f89623 100644
--- a/popover-api/popover-hint/index.html
+++ b/popover-api/popover-hint/index.html
@@ -15,28 +15,25 @@
           popovertargetaction="toggle"
           id="menu-1">
           Menu A
+          <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
         </button>
 
-        <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
-
         <button
           popovertarget="submenu-2"
           popovertargetaction="toggle"
           id="menu-2">
           Menu B
+          <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
         </button>
 
-        <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
-
         <button
           popovertarget="submenu-3"
           popovertargetaction="toggle"
           id="menu-3">
           Menu C
+          <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
         </button>
 
-        <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
-
         <div id="submenu-1" popover="auto">
           <button>Option A</button><br /><button>Option B</button>
         </div>