Support minimal distance to the viewport for tooltips

Demo: https://screencast.googleplex.com/cast/NTgyMzAwNzIwMDExNjczNnw3MDc3MzExNi1mZQ

Bug: 392078321
Change-Id: I8a904de15b317720b62795df78456ac7656faadb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6235026
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Marcel Pütz <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: Marcel Pütz

front_end/ui/components/tooltip/tooltip.css

@@ -5,6 +5,7 @@
  */
 
 :host {
+  --tooltip-viewport-distance: var(--sys-size-5);
   /* Reset the browser's default styles for [popover] elements. */
   margin: 0;
   background: none;
@@ -16,6 +17,8 @@
   position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
 
   & .container {
+    width: max-content;
+    margin: var(--sys-size-2);
     color: var(--sys-color-inverse-on-surface);
     background-color: var(--sys-color-inverse-surface);
     box-shadow: var(--sys-elevation-level2);
@@ -26,16 +29,31 @@
 
 :host([variant="rich"]) {
   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;
 
   & .container {
+    margin-inline: 0;
+    margin-block: var(--sys-size-3);
     color: var(--sys-color-on-surface);
     background-color: var(--sys-color-base-container-elevated);
     border-radius: var(--sys-shape-corner-small);
     padding: var(--sys-size-6) var(--sys-size-8);
   }
 }
 
-.container {
-  margin: var(--sys-size-2);
+@position-try --bottom-left {
+  position-area: bottom span-left;
+  margin: 0 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance);
+}
+
+@position-try --top-right {
+  position-area: top span-right;
+  margin: var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0 0;
+}
+
+@position-try --top-left {
+  position-area: top span-left;
+  margin: var(--tooltip-viewport-distance) 0 0 var(--tooltip-viewport-distance);
 }