I’m trying to implement a system in a strategy game where you can mouse over either a character or a UI element to cause an information panel to appear on the screen. Then when you’re no longer hovering over the character or the UI element, the information panel disappears. This is pretty easy for the character side of things, as I can just use the OnBeginCursorOver and OnEndCursorOver events to turn the information panel on and off.
However, I’m not so clear on how to do this for a UMG user widget. I know that borders have a OnMouseMove event, but I don’t think that that can be used to detect when the cursor leaves the border’s space. There is also a “IsHovered” node present for user widgets, but I think that only really works for buttons.
What is the recommended way to handle detecting whether or not the cursor is currently hovering over a UI element?
I would also like to be able to do this. Anyone have any tips or pointers? Google only provides a lot of people asking how to do this, and no solutions. For games that aren’t FPS/TPS, this kind of functionality is not rare. Surely someone out there has done something like this? Right? Beuller?
I’ve been thinking on how to do something like this for my own project. One possible option would be to use a float timer variable set to something very small (i used 0.05 seconds). Each tick it counts down, and if it hits 0, make the information panel disappear.
In the borders ‘OnMouseMove’ event, have it reset the timer to 0.05, that way, while the mouse is inside the border, the timer will keep getting reset and will never hit 0. Once you move the mouse outside the border, the timer should hit 0 and remove the information panel.
If anyone has a better way of doing this please share!
Cheers!
@Variss has the right idea, if you intend to use the border as the trigger itself. I use it as shown in the images to make an instructions panel clearly visible when moused-over and nearly invisible when not.
Alternatively, you could put an invisible button over the UI element and use the hover events, or look into the focus function of widgets to try to trigger a show/hide event on focus gained/lost.
Though in testing, using the hover/unhover of a button works better for a toggled effect. If the mouse is held still with the method above, you get flickering.
In some of my widgets, I place a border around the relevant areas and bind this to them:
And then I have this, which means that it doesn’t cover the same area as the border, but it kinda works for me right now:
Fingers crossed I won’t find a layout or feature I want to implement which breaks this in the future, but things would be so much easier if Border had OnMouseEnter and OnMouseLeave…
