Hide Widget when pointer is out of the widget size

I have made a BP with mesh in it When user clicks on mesh
It shows a widget asking user to select which color does he wants to select

What I want to do is, as soon as I end hovering my cursor in the main area of the widget the widget should disappear.

I do not want to hide widget as soon as user selects a color, I want to hide widget when user’s pointer is outside
the widget size.
Also please note that my widget space type is SCREEN and not world.
I know that I could have user ON HOVER END event, but this works only if the widget space is WORLD and does not work in SCREEN!!

Please help

If you are using a WidgetComponent (3d widget), you should be able to use OnEndCursorOver to achieve this. You’d need to implement in on the component, not the widget. This is the equivalent of OnMouseLeave for 2d widgets.

Everynone >> How do you suggest should I use this OnMouseLeave for the 2d event.
I mean should I use it inside my UI BP, or actor BP please do help me out :slight_smile:
Also please note my UI is 2D and there seems to be no event in my canvas or Border component named OnMouseLeave , I do have OnUnHovered in my Button Components which seems inappropriate to be used as i don’t want to exit as soon as I unhover my button.

I want to exit when I leave my main area

Never Mind my friend I have figured it out and it did work out pretty well.
Thank you!!!
To people who have same problem you can add OnMouseLeave Event inside you widget BP.
Please note that if you are unable to find that event inside BP. please uncheck “Context Sensitive”.
And then try to find this event :slight_smile:

In you original post you mentioned World and Screen settings. These are used when embedding a widget in a component and making it a part of the 3d world, that’s why I suggested OnEndCursorOver:

When talking about 2d widgets, you will want to utilise OnMouseLeave. Please note that you can only override this function for the entire widget. You cannot simply select a border and detect cursor sliding off it. To be perfectly honest and if I remember correctly OnMouseLeave is detected when the cursor leaves a Visible part of the widget. So if you have a Visible image wrapped in a SelfHitInvisible border, you will be able to detect leaving Image area. But I digress.

Correct me if I’m wrong, but I believe you have a big UI element with some other parts in it and you want to detect cursor slide of it. Consider adding and image to clarify, this usually helps a lot.

If you want to have UI cover a part of the screen and need to react to cursor leaving some part of it, use custom widgets. And then insert then into a parent container. This way you will have a self-contained OnMouseLeave logic bound to a custom the widget:

213711-untitled1.png

It’s in the override menu, as shown below.
And glad you made it work!

Yes thank you for your answer and elaborate explanation! I had no idea that we can use override function to do so.Your answer surely helped me a lot. And yes I have added my UI inside another widget in a container :). To be on safe side i have also added another image with alpha set to 0 behind my desired UI.

Is it possible to detect that click was made outside widget’s bounds inside the widget itself, without needless complex hierarchy like extra parent on top of my UW?