Programatically adding on:click and use:popup to existing ID

[3goats]

Hi I'm experimenting with the floating-ui popups and have this working nicely:

<button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-800 m-2 text-sm" on:click={clear} use:popup={popupCloseQuery}>CMD</button>

However I need to add the on:click and use:popup to an existing inline SVG element. I'm struggling to work out how to do this. Is this possible and if so how ?

Thanks for the very cool components.

[endigo9740]

@3goats I don't believe SVG are flagged as interactive elements, so you'll likely need to wrap them in a button. Much like you have above. Just remove the styling from the button yourself if you do not wish to display this. And I might recommend adding type="button (the default is submit) to prevent any accidental form interaction.

If the SVG interferes with your ability to interact with the button, you can use CSS to disable pointer events on the SVG itself. With Tailwind this would be via the pointer-events-none utility class.

[3goats]

Sorry not sure that I understand. I have this in my SVG:

<g id="overlay">
	<circle id="be1" class="circle st18" cx="50" cy="87" r="5.4"/>
	<circle id="fe2" class="circle st18" cx="49" cy="135" r="5.4"/>
	<circle id="fe1" class="circle st18" cx="218.2" cy="110" r="5.4"/>
</g>

Basically, I want to programatically add the on:click={clearStdOut} use:popup={popupCloseQuery} attributes to each of the ID's.

[endigo9740]

You didn't mention you were wanting to limit interaction to individual portions of the SVG. That's critical info to know ;)

Also, where is use:popup coming from? Floating UI Svelte (this project) does not implement a Svelte Action for this. Are you confusing Floating UI Svelte with Skeleton's Popup feature perhaps? These are two very different tools that do not operate 1:1. I'd recommend reading the docs for Floating UI Svelte in full if you wish to learn how that operates.

If you need help with Skeleton's Popup feature, then you're in the wrong project. Please move your issue over to the Skeleton repository here:
https://github.com/skeletonlabs/skeleton

[3goats]

I'm using Skeleton's Popup as per the code example e.g.

const popupFeatured: PopupSettings = {
	// Represents the type of event that opens/closed the popup
	event: 'click',
	// Matches the data-popup value on your popup element
	target: 'popupFeatured',
	// Defines which side of your trigger the popup will appear
	placement: 'bottom',
};

<button class="btn variant-filled" use:popup={popupFeatured}>Show Popup</button>
				

[3goats]

So using the code example bellow, I'm trying to add use:popup={popupFeatured} attribute to my SVG circle elements.

[endigo9740]

I'm using Skeleton's Popup as per the code example e.g.

Then you're in the wrong project my friend :) This is the Floating UI Svelte project. I'm going to go and close out this thread and ask that you go ahead and post a new Discussion post here:

https://github.com/skeletonlabs/skeleton/discussions

Feel free to link to this thread for reference. We'll continue the conversation there.

[endigo9740]

If it clarifies things:

• Floating UI Core - a library created and maintained by the Floating UI team (not associated with Skeleton Labs)
• Floating UI React - a React wrapper + utility features maintained by the Floating UI team
• Floating UI Svelte - a Svelte wrapper port maintained by the Skeleton Labs team (this project!)

The Skeleton v2 Popover feature uses the Floating UI Core + a Skeleton-provided Svelte Action use:popover as part of the library.

In Skeleton v3 we're dropping Popover in favor of direct integration with Floating UI Svelte for Svelte projects, and Floating UI React for React projects.

Hope that helps clear things up.

[3goats]

This code allows me to bind a click event listener and some SVG manipulation to each of the circles:

let elements = gsap.utils.toArray(".square");

let clickEventActions = (e) => {
    console.log('some event content here...')
    console.log("----------------" + e.target.id + "----------------------")
}

elements.forEach((item) => {
    item.addEventListener("mouseenter", () => {
        gsap.to(item, {
            fill: "purple",
            duration: 0.5,
            overwrite: "auto",
        });
    });
    item.addEventListener("mouseout", () => {
        gsap.to(item, {
            fill: "red",
            duration: 0.5,
            overwrite: "auto",
        });
        item.addEventListener('click', clickEventActions);
        
    });
});

However, I also need to bind a popup to the id.

[3goats]

I can add button role to my SVG so now it behave more like a button. e.g.

<g id="overlay">
	<circle id="be1" class="square st18" cx="50" cy="87" r="5.4"/>
	<circle id="fe2" class="square st18" cx="49" cy="135" r="5.4"/>
	<circle id="fe1" class="button st18" cx="218.2" cy="110" r="5.4" role="button" on:click={clearStdOut} use:popup={test}/>
</g>

However, it doesn't invoke/show the popup.