Ancestors

Written by Wes on 2024-09-25 at 18:24

[#]CSS smart folks, I need help 🥺

I'm using anchor positioning to show a popover as a tooltip but I can't figure out how to make the little triangle move around when a position-try fallback is used.

Is there a way to modify ::after pseudo-element when a @position-try fallback is used? Even some JS api to detect a change in position-area or even just a change in top?

Note: MutationObserver doesn't work because the DOM isn't changing when a fallback is used.

WIP codepen is at https://codepen.io/wes_goulet/pen/GRVgyGq

=> View attached media

=> More informations about this toot | More toots from goulet@techhub.social

Written by Wes on 2024-09-25 at 18:25

cc @Una @argyleink

=> More informations about this toot | More toots from goulet@techhub.social

Written by Una Kravets on 2024-09-25 at 18:27

@goulet @argyleink this is a known gap in the API right now 🥲 (the ability to know which position you’re in and therefore modify styling). There’s also a proposal to style an pseudo element for the arrow (::tether) which would support auto repositioning

=> More informations about this toot | More toots from Una@front-end.social

Toot

Written by Wes on 2024-09-25 at 19:48

@Una @argyleink Thanks for the info!

Any GitHub issue I can follow along to see when this might be possible?

For now I'm just making the little arrow a visual PE on mouse enter event.

document.querySelector("button").addEventListener("mouseenter", () => {
  popover.showPopover();

  if (popover.computedStyleMap().get("margin-top").value !== 0) {
    // popover is below
    popover.dataset["position"] = "bottom";
  } else {
    popover.dataset["position"] = "top";
  }
});

And then some CSS based on the data-position attribute to move the little arrow around. Works good enough for mouse usage, touch usage just won't have the arrow for now.

=> View attached media

=> More informations about this toot | More toots from goulet@techhub.social

Descendants

Written by Una Kravets on 2024-09-25 at 20:05

@goulet @argyleink yeah! The other thing you have to watch out for is when the position changes on viewport size like in your screencap

Here’s the discussion on ::tether https://github.com/w3c/csswg-drafts/issues/9271

But we’ve also floated using state queries to capture positions and apply styling (they would have to be named @position-try positions) and JS hooks would need to exist too. I don’t think there’s anywhere to follow those yet

=> More informations about this toot | More toots from Una@front-end.social