Add center position fallback for rich tooltips

Before: http://b/402683575#attachment63715341
Demo: http://b/402683575#attachment63715342

Change-Id: I4187e2aca34130243f2f2e5983013fda253f1ff0
Bug: https://issues.chromium.org/402683575
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6345658
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Marcel Pütz <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>

Author: Marcel Pütz

front_end/ui/components/docs/tooltip/basic.ts

@@ -41,6 +41,7 @@ Lit.render(
         id="removable"
         @click=${() => document.getElementById('removable')?.remove()}
         class="anchor"
+        aria-details="programatic"
         style="position: absolute; left: 16px; top: 216px;"
       >
         Click to remove anchor

front_end/ui/components/tooltips/tooltip.css

@@ -15,7 +15,7 @@
   position-area: bottom;
   position-visibility: anchors-visible;
   justify-self: anchor-center;
-  position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
+  position-try-fallbacks: flip-block;
 
   & .container {
     width: max-content;
@@ -33,7 +33,7 @@
   justify-self: unset;
   margin: 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0;
   position-area: bottom span-right;
-  position-try-fallbacks: --bottom-left, --top-right, --top-left;
+  position-try-fallbacks: --bottom-left, --bottom-center, --top-right, --top-left, --top-center;
 
   & .container {
     margin-inline: 0;
@@ -59,3 +59,15 @@
   position-area: top span-left;
   margin: var(--tooltip-viewport-distance) 0 0 var(--tooltip-viewport-distance);
 }
+
+@position-try --bottom-center {
+  justify-self: anchor-center;
+  position-area: bottom;
+  margin: 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) var(--tooltip-viewport-distance);
+}
+
+@position-try --top-center {
+  justify-self: anchor-center;
+  position-area: top;
+  margin: var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0 var(--tooltip-viewport-distance);
+}