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

Toot

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

cc @Una @argyleink

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

Descendants

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

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

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

Written by CSS by T. Afif :verified: on 2024-09-25 at 20:49

@Una @goulet @argyleink

Here is a (hacky) idea: https://codepen.io/t_afif/pen/mdNyKox

Since we can adjust the margin, we can use it combined with clip-path to show/hide the arrows.

Note that both arrows are always there, it's the clip-path (with the margin-box) that control the visibility of them.

=> View attached media

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

Written by Adam Argyle :chrome: on 2024-09-25 at 21:01

@css @Una @goulet rad! sharing with the team 👍🏻

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

Written by Wes on 2024-09-25 at 22:04

@css @Una @argyleink That's great 💪

I was wondering if there was some way to leverage the fact that we can change margins in the @position-try block... thanks!

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