Skip to content

Fix broken popover hint example - #396

Open
chrisdavidmills wants to merge 1 commit into
mdn:mainfrom
chrisdavidmills:fix-broken-popover-example
Open

Fix broken popover hint example#396
chrisdavidmills wants to merge 1 commit into
mdn:mainfrom
chrisdavidmills:fix-broken-popover-example

Conversation

@chrisdavidmills

@chrisdavidmills chrisdavidmills commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

While fixing mdn/content#45515 (see mdn/content#45550), I noticed that my popover=hint example was broken: https://mdn.github.io/dom-examples/popover-api/popover-hint/. The auto and hint popovers now all appear in the top-left of the viewport.

This PR fixes the example. For the auto popovers, I replaced the anchor()/anchor-center positioning with position-area positioning. For the hint popovers, I kept the anchor()/anchor-center positioning, but made sure to include a margin reset and included position-anchor: auto; because it seems like this is now needed to opt-in to the association in this case.

It now works fine in Chromiums and Fx. In Safari it works, except that the auto popovers move to the bottom of the screen when you are not hovering over a popover control (seems like a bug in Safari to me). This is much better support than it used to be; it used to be broken in both Saf and Fx.

Fixes #396

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants