Closing current popup with javascript


I recently rediscovered TH again and I am looking for help on the following.
I made an infographic for a client with clickable items (buttons) that, when clicked, trigger a custom behaviour to make a popup (tooltip-esque) appear. Works awesome!
What it basically does is trigger a timeline on the first click and continues it (and closing the popup) on the second click.

What I would like to achieve is when the first item (button) is clicked the first popup opens but if a next (random) item is clicked the first popup closes and the next one opens. So the second click on the same item to close the popup still functions, but when a random other item is clicked the popup that is currently open closes first.

My Javascript skills are very limited but I wonder if there is any function that can do this for me.
Due to the secrecy of the content of my client I unfortunately cannot share any specific project files here with you. If needed I can make a dummy file without the content and only the functions/behaviours in it.
I hope someone of you can help me solving this problem.
Kind Regards, Jasper

infographic dummy (37.0 KB)

This is the way I would do it.
First I would use.

So that you can use one Symbol with instances of it.

I would then put the button in the symbol And have it continue a popup timeline.
The timeline would use a pause and got to time in timeline with reverse.
This creates a toggled button.

At the begining of the timeline I would have the call to the JS.
The JS will look for all the symbole Instances with the name popup and reverse the popup timeline of each. We would need to check that we are not doing so for a running timeline..

The hype-symbol-override-extension. ( we put the cdn linked file in the Head)

Is used to set the Inner text of each button and info pop up.

Screenshot 2021-04-27 at 16.11.13

We can also let the group that all the symbols are in call the same JS. This will allow the user to click on the scene area ( where the group is expanded to ) and close all open popups.

infographic dummy Hypeforum. (27.6 KB)

1 Like

Here is the something similar in Hype Data Decorator (basic implementation, so no box resizing etc.) (21,7 KB) :nerd_face:

1 Like

@MarkHunte Thanks for your input! Much appreciated.
I quickly opened the file you attached and I think I can make it work for my own project.
I will have a fiddle and let you know if it worked. Thanks again!