Unreal MMO Development with Yaz

Log69: How to make a hovering widget display near your mouse in UE5

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?

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.

Exit mobile version