@@ -110,6 +110,23 @@ to find the “best” one that avoids overlap/overflow.
110110 max-inline-size: 20em;
111111 }
112112 </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>
113130</div>
114131
115132<h3 id="values">
@@ -2374,14 +2391,16 @@ both existing and upcoming,
23742391allow establishing such connections explicitly,
23752392so that non-visual user agents can also benefit.
23762393
2377- For example, the Popover API in HTML
2394+ For example, the [[#the-popover-attribute| Popover API in HTML]]
23782395automatically links the invoker button
23792396to the popover element,
23802397including automatically adjusting tabbing order;
23812398it <em> also</em> establishes the invoker button
23822399as the [=implicit anchor element=] for the popover,
23832400making it easy to use Anchor Positioning as well.
23842401
2402+ Issue: Add a popover example.
2403+
23852404In more general cases,
23862405ARIA features such as
23872406the <a href="https://w3c.github.io/aria/#aria-details"><code>aria-details</code></a>
0 commit comments