@@ -110,6 +110,23 @@ to find the “best” one that avoids overlap/overflow.
110
110
max-inline-size: 20em;
111
111
}
112
112
</pre>
113
+
114
+ Note that using the [[#the-popover-attribute|Popover API]]
115
+ will automatically set 'position' and create the anchoring relationship
116
+ without setting 'anchor-name' or 'position-anchor' value
117
+ (by defining an [=implicit anchor=] ),
118
+ so those properties wouldn't need to be explicitly set again.
119
+ So with the correct markup, this example can be simplified to:
120
+
121
+ <pre class=lang-css>
122
+ .tooltip {
123
+ /* Using the popover + popovertarget attributes sets 'position: fixed'
124
+ and creates the necessary position-anchor relationship already. */
125
+ position-area: block-start;
126
+ position-try: flip-block;
127
+ max-inline-size: 20em;
128
+ }
129
+ </pre>
113
130
</div>
114
131
115
132
<h3 id="values">
@@ -2374,14 +2391,16 @@ both existing and upcoming,
2374
2391
allow establishing such connections explicitly,
2375
2392
so that non-visual user agents can also benefit.
2376
2393
2377
- For example, the Popover API in HTML
2394
+ For example, the [[#the-popover-attribute| Popover API in HTML]]
2378
2395
automatically links the invoker button
2379
2396
to the popover element,
2380
2397
including automatically adjusting tabbing order;
2381
2398
it <em> also</em> establishes the invoker button
2382
2399
as the [=implicit anchor element=] for the popover,
2383
2400
making it easy to use Anchor Positioning as well.
2384
2401
2402
+ Issue: Add a popover example.
2403
+
2385
2404
In more general cases,
2386
2405
ARIA features such as
2387
2406
the <a href="https://w3c.github.io/aria/#aria-details"><code>aria-details</code></a>
0 commit comments