Skip to content

Interaction between Popover API and CSS Anchor Positioning specs #9311

Closed
@jpzwarte

Description

@jpzwarte

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    topic: popoverThe popover attribute and friends

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions