How to use popup utility with element that is not directly accessible

[3goats]

Hi

I have a working example here of an interactive SVG REPL image using Svelte/

I'm trying to workout if it's possible to use the Skeleton Popup utility. i.e. replace the alert in the working example with a Skeleton Popup ?

I already asked this on StackOverflow and the responses seem to elude to fact that this is not possible.

[Sarenor]

Popups are pretty new and your usecase is pretty specific. I'd expect it to work, but I'm only 90% sure. I'd probably just suggest giving it a try tbh.

I'd also caution you about the accessibility of attacking a popup to an svg element part though as StackOverflow already did.

[3goats]

Thanks for the feedback. Would you think it more appropriate to attach a modal to the SVG rather than the popup. My use case is to provide an interactive diagram that reflects data from different points in the SVG.

[Sarenor]

Popup or modal isn't an issue, triggering them with a click interaction where no keyboard interactions are possible/expected is the problem.
If your app is highly visual and you don't expect visually impaired people to use it, that's a big part of the concern fixed

[3goats]

Yeah this is an internal demo app, mainly used by me for now. so won't need keyboard. Thanks for the feedback.

[riziles]

I'd be surprised if that doesn't work in the Skeleton modal.

[Sarenor]

For internal use this should be super nice. If the popup doesn't work for some reason, a modal triggered with a manual on:click function definitely should

[endigo9740]

Hey @carlskii as long as there's an element in your HTML you can add an event listener to it or an action. The SVG rect qualify for this. This means modals and popups will each work respectively. That said, you'll need to move your SVG markup into the HTML template. Neither Svelte's on: or 'use:` directives work if the element is constructed within your script tags afaik.