Improve compat notes and behavior on popover-hint demo (#329)

* Improve compat notes and behavior on popover-hint demo

* Updates for pepelsbey review comments

* Implement Vadim suggestion

Author: chrisdavidmills

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,20 @@ body {
   height: inherit;
   background: #ccc;
   margin: 0;
-}
-
-#wrapper {
-  height: inherit;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+#wrapper {
+  width: 60%;
+  max-width: 500px;
+}
+
 /* Button bar styling */
 
 #button-bar {
   height: 48px;
-  width: 30%;
   min-width: 300px;
   padding: 8px;
   border-radius: 6px;
@@ -36,6 +36,8 @@ body {
   display: flex;
   justify-content: space-around;
   gap: 10px;
+  z-index: 2;
+  position: relative;
 }
 
 /* Button styling */
@@ -126,11 +128,24 @@ 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) {
   .help-para {
     width: auto;
     right: 16px;
   }
+
+  #wrapper {
+    width: 90%;
+  }
 }

popover-api/popover-hint/index.html

@@ -15,48 +15,64 @@
           popovertargetaction="toggle"
           id="menu-1">
           Menu A
+          <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
         </button>
 
         <button
           popovertarget="submenu-2"
           popovertargetaction="toggle"
           id="menu-2">
           Menu B
+          <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
         </button>
 
         <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="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>
 
-    <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 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>
-    <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>
   </body>
 </html>