[css-anchor-position] Simplify introductory example

Author: fantasai

css-anchor-position-1/Overview.bs

@@ -82,21 +82,18 @@ This can be done with the following CSS:
 		   referring to the --tooltip anchor. */
 		anchor-default: --tooltip;
 
-		/* Align the tooltip's bottom to the top of the anchor,
-		   but automatically swap if this overflows the window
-		   to the tooltip's top aligns to the anchor's bottom
-		   instead. */
-		bottom: anchor(outside);
+		/* Align the tooltip's bottom to the top of the anchor;
+		   this also defaults to horizontally center-aligning
+		   the tooltip and the anchor (in horizontal writing modes). */
+		inset-area: block-start;
 
-		/* Set up a 300px-wide area, centered on the anchor.
-		   If centering would put part of it off-screen,
-		   instead clamp it to remain on-screen. */
-		left: clamp(0px, anchor(center) - 150px, 100% - 300px);
-		right: clamp(0px, anchor(center) - 150px, 100% - 300px);
-		max-width: 300px;
+		/* Automatically swap if this overflows the window
+		   so the tooltip's top aligns to the anchor's bottom
+		   instead. */
+		position-try: flip-block;
 
-		/* Center the tooltip in that area. */
-		justify-self: center;
+		/* Prevent getting too wide */
+		max-inline-size: 20em;
 	}
 	</pre>
 </div>