# How to create a UI element near to a clicked game object?

**URL:** <https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756>\
**Category:** Phaser 3\
**Created:** [June 12, 2019, 11:22am UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756 "2019-06-12T11:22:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![VELFR](https://avatars.discourse-cdn.com/v4/letter/v/76d3ee/32.png) [@VELFR](https://phaser.discourse.group/u/VELFR)\
**Post date:** [June 12, 2019, 11:22am UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756/1 "2019-06-12T11:22:51Z")

</div>

I’m trying to implement a Context Menu UI element which will be opened on `gameobjectup`, when certain game object is clicked. I want to pass some data into it, spawn it relatively to x and y of my game object (call it `ObjectClicked`) and close on some conditions (mouse click away, “Close” button clicked etc.).

Here’s prototype design:  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/89c5f855e5b104a12e228d005c1bbbccfb2e3959.png)

Which APIs of Phaser could you recommend to create something like that? `Group`? I guess it should contain a `text` and some kind of list of buttons.

Maybe you could also recommend a few good tutorials on this topic?

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 12, 2019, 11:49am UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756/2 "2019-06-12T11:49:36Z")

</div>

Hey VELFR,  
You should probably use a [Container](https://labs.phaser.io/index.html?dir=game%20objects/container/&q=) for this. Just add all of your UI elements to the container, and set the container’s visibility to false. When someone clicks on the circular button, position the container relative to the x, y of the mouse and set the visiblity to true.

Hope that helps!

---

<div class="post-metadata">

**Author:** ![VELFR](https://avatars.discourse-cdn.com/v4/letter/v/76d3ee/32.png) [@VELFR](https://phaser.discourse.group/u/VELFR)\
**Post date:** [June 12, 2019, 11:58am UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756/3 "2019-06-12T11:58:55Z")

</div>

Thanks. But whait if I have multiple clickable objects on a scene? Can I update and move one container or should I create one per `ObjectClicked`?

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 12, 2019, 12:15pm UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756/4 "2019-06-12T12:15:20Z")

</div>

Good question and I think it greatly depends on what you’re trying to accomplish. If there can only be one popup open at a time and the popup is always a static layout, I would just create one and position it/populate data based on what button the user clicks.

If there are a few buttons and you can have multiple popups open at once, I would definitely create a popup per button.

If there are many buttons and you can have multiple open at once, I would create the popup onClick and destroy it once it closes. Creating a popup once someone clicks a button is more processor intensive, but you also have to weigh how much memory the program is going to use and you have to consider how long it will take to create all the popups at the start of the scene.

So really, any solution works, you just need to figure out which one is right for the program that you are creating.

---

<div class="post-metadata">

**Author:** ![VELFR](https://avatars.discourse-cdn.com/v4/letter/v/76d3ee/32.png) [@VELFR](https://phaser.discourse.group/u/VELFR)\
**Post date:** [June 12, 2019, 1:50pm UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756/5 "2019-06-12T13:50:03Z")

</div>

I want them to be visible one at a time.

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 12, 2019, 1:55pm UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756/6 "2019-06-12T13:55:37Z")

</div>

If only one popup is visible at a time, then you would save the most processing / memory by just changing the popup’s position and data when a separate button was clicked.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [June 12, 2019, 2:48pm UTC](https://phaser.discourse.group/t/how-to-create-a-ui-element-near-to-a-clicked-game-object/2756/7 "2019-06-12T14:48:07Z")

</div>

[Here](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384) are some ui plugins, you might try [dialog](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-dialog/) plugin for 1 level menu, like [this demo](https://codepen.io/rexrainbow/pen/oQjMWE?editors=0010) shown.
