In this short post we’ll look at how we can make a widget pop up near the mouse and follow it.
This use-case is for a widget to display information when player is hovering their mouse over an item widget.
Capture on hover event
In my particular use case, I have an inventory slot widget.
The key requirement here is to have a widget which contains a Border component or other compatible component, such as sizebox, etc, which are able to capture mouse events.
The visibility has to be set to Visible.
These components don’t actually have the literal ‘On Hover‘ event, but they do have On Mouse Enter and On Mouse Leave.
what are we doing above?
- pre-condition: I first check if I want to display the hover widget, in my case I check that I have an item in the inventory slot
- create the hover widget, in my case its called item overlay widget
- add the hover widget to viewport, save it as a variable reference
- set the position statically with a offset – we will update this next frame
When mouse leaves this widget, I want to remove the widget from parent. I do this only if I have the hover widget set in my variable.
Update position of hover widget on tick
This is where we will dynamically change the hover widgets position based on where your player mouse is.
On each tick, we just check that we’re actually displaying the hover widget, which will live in our tmp_overlay_w variable.
If its set, we want to get mouse position in viewport – this is because we want to position the hover widget near the mouse.
Next, we get the hover widget size in viewport, using Get Desired Size. Note that when you add it to the viewport, you will have to wait at least 1 frame before this ‘desired size’ is populated.
I then do some basic edge detection to decide whether to place the hover widget on the left or the right of the mouse.
Decide position of widget, left or right of mouse
This is basically where I take my mouse position and subtract the overlay widget size from X dimension. This is assuming my default location to hover this widget is to the left.
If this subtraction is yielding a negative value, then I know the widget is going to appear off screen, so I instead want to place it to right side. If however its positive, I can go ahead and update the position with these values.
That’s what you can see me do after the branch I Set Position In Viewport of the overlay widget, which is taking the mouse position and either subtracting the size of the widget in X (and another 15 for padding).
On the False condition it just wants to instead place the hover widget to the right. So you can see me take my mouse position and adding a margin of 15 to it.
Here’s a slightly more zoomed in image of that same logic.
Note that you can repeat this logic for evaluating whether you want to display the hover widget above or below the mouse.
In my case, I position the Y dimension to mid point of the widget.
Overlay widget
The overlay widget that you use can be whatever widget you like! There’s no additional dependency there.
It just has to be a User Widget. For reference, mine looked something like this:
And it contained a construct to populate the components based on a Item variable that I provide in constructor.
