Description
So I've been reading efforts on popover and CSS Anchor positioning. Based on my understanding, i wrote out some scenarios on how I think this will/should work. This includes imperative & declarative ways to show a popover.
If this is how it will work based on current specs, then great, consider this a thought exercise :) If not, please point out where I've gone wrong and we can discuss that.
1. Imperative popover without invoker
document.querySelector('button').addEventListener('click', () => {
document.querySelector('#popover').togglePopover();
});
<button>Button</button>
<div id="popover" popover></div>
No anchorElement
or anchor
attribute is set. The popover is centered in the viewport because there is no CSS anchor positioning styling.
2. Imperative popover with invoker
This references #9111 for the invoker
parameter.
document.querySelector('button').addEventListener('click', event => {
document.querySelector('#popover').togglePopover({ invoker: event.target });
});
<button>Button</button>
<div id="popover" popover></div>
Implicitly sets the anchorElement
to the button, based on the invoker
parameter to togglePopover
. The popover is centered in the viewport because there is no CSS anchor positioning styling.
3. Declarative popover without anchor
attribute
<button popovertarget="popover">Button</button>
<div id="popover" popover></div>
Implicitly sets the anchorElement
property to the button. The popover is centered in the viewport because there is no CSS anchor positioning styling.
4. Declarative popover with anchor
attribute
<button id="button" popovertarget="popover">Button</button>
<div id="popover" anchor="button" popover></div>
The anchor
attribute causes anchorElement
to be set on the popover. The popover is centered in the viewport because there is no CSS anchor positioning styling.
5. Declarative popover without anchor
attribute and CSS anchor positioning styling
<style>
#popover {
position: absolute;
top: calc(.5em + anchor(auto));
}
</style>
<button popovertarget="popover">Button</button>
<div id="popover" popover></div>
The anchorElement
is set implicitly on the popover and has the value of the button element. Based on the anchorElement
, the button automatically becomes the implicit
anchor element of the popover (see https://drafts.csswg.org/css-anchor-position-1/#anchor-pos). The popover is positioned relative to the button because of the CSS anchor positioning styling.
6. Declarative popover with anchor
attribute and CSS anchor positioning styling
<div id="other"></div>
<style>
#popover {
position: absolute;
top: calc(.5em + anchor(auto));
}
</style>
<button popovertarget="popover">Button</button>
<div id="popover" anchor="other" popover></div>
The anchor
attribute causes the anchorElement
property to be set on the popover and has the value of the div#other
element. Based on the anchorElement
, thediv#other
element automatically becomes the implicit
anchor element of the popover. The popover is positioned relative to div#other
because of the CSS anchor positioning styling.
7. Declarative popover with CSS anchor positioning styling anchor-element
override
<div id="decoy"></div>
<div id="other"></div>
<style>
#other {
anchor-name: --other;
}
#popover {
position: absolute;
top: calc(.5em + anchor(--other auto));
}
</style>
<button popovertarget="popover">Button</button>
<div id="popover" anchor="decoy" popover></div>
The anchor
attribute causes the anchorElement
property to be set on the popover and has the value of the div#decoy
element. Because the popover has an explicit anchor element specified in the anchor()
function, the popover is positioned relative to div#other
.