I have a widget blueprint with a button (with alpha channel set to 0, so it’s transparent) and it has a text block. I’d like to modify the text block on hover of the mouse. How could I go about this?
I am in 4.4.3 and cannot change to 4.5.1 because it scraps my game. Thanks for any insight
Hello Madvoyer,
Have you tried using the “On Event Mouse Enter” node. Make a widget blueprint with just your button and this will allow you to fire off what ever event it is you need when the mouse is hovering. There is also a node called “Is Hovered”, this returns a boolean value. I hope this helps.
Make it a great day
I know this is old, but there is still no better way to do this? The problem with creating a new widget for just one button is that if you have many buttons you need many manually created widgets because each widget needs to do it’s own stuff in the “OnClicked” event.
If you have many normal buttons in a widget you can just have all the “OnClicked” events in your one event graph, but if your button is inside a widget, this does not work. And for defining individual behaviour on “OnClicked” there has to be one widget blueprint for one button, so this means if you have 10 buttons you need to have 10 widgets in your content browser.
I guess you get this is not really a comfortable solution?
I know I also could do it with the isHovered Node, but then I would have to check every tick whether any button is hovered and compare this to whether he was hovered the last tick to basically get “OnEventMouseLeave”. A lot of unnecessary stuff in the tick, which is not good.
Hello ,
If you would like to accomplish an on hovered event with out the use of a tick and still have the use of your OnClicked event you would simply bind a new Onclicked event to the button after it has been add to the second widget. I have provided an example below. I hope that this information helps.
Here I created a new widget that will hold my button that I would like to have the “Hovered event” for. It’s a single button and a canvas panel for this example. The canvas panel has been resized to fit the button to make for an accurate “Hover” effect.
Here is the event graph for my button widget (The widget is named ButtonTest). I am using an On Mouse Enter Event to simulate the fact that the mouse is hovering over the button. In this case it is a simple print string that lets me know when I am over the button.
Here I have added the button widget (ButtonTest) twice to another widget (in this case it was left as the default name “NewWidgetBlueprint”)
Here is the event graph for “NewWidgetBlueprint” this is the widget that will be added to the screen. As you can see here I have pulled out a reference to the button from “ButtonTest” and I have bound new click events for each instance of “ButtonTest” that has been add to “NewWidgetBlueprint”. On Event Construct these new OnClickedEvents will be applied to each of there corresponding instances of the button from “ButtonTest”
Make it a great day
Thanks a lot Rudy, works really well! Just a big ugly to have all these Event delegate wires, but I can live with that 
Hope this helps anybody else coming here from google. Make your text a variable, then create a set color and opacity node by right-clicking (for some reason it doesn’t appear in the list when dragging from your ‘Get TextBlock’) then just link the ‘Get TextBlock’ (or whatever you have titled your text) to it.
Sorry to hijack and necro the thread, but I haven’t seen a solution anywhere else that doesn’t require set up for every button. This solution only needs a reference to a container with the buttons within it (e.g. a vertical box), making it a lot easier if you have large (or multiple) lists.
Initialise:
At Event Construct the widget blueprint loops through all the children (in this case, buttons) in the vertical box. Each button is bound such that it when hovered over (OnHovered) it ‘shouts’ out to a custom function (OnHovered_Cust), and when unhovered over (UnHovered) it ‘shouts’ out to another custom function (OnUnHovered_Cust).
OnHovered_Cust:
When OnHovered_Cust is called it loops through each of the children (buttons) of the vertical box, stopping when one of the buttons is found to be hovered over (IsHovered = true). The child (this time, the text) of that child button is then found, and the desired colour change is applied. If this sounds confusing, what we’re doing is taking the vertical box, finding it’s children (buttons), and then finding the children of those children (the text in the buttons). The text box is assumed to be the button’s first child, so the Index in GetChildAt is set to 0.
OnUnHovered_Cust:
When OnUnHovered_Cust is called it loops through each of the children (buttons). For every button not being hovered over (IsHovered = false) it resets the text colour.
Overall Layout:
Implications:
At Event Construct each button is looped through and bound to an Event Dispatcher, meaning if this method is used for a large number of buttons there may be a brief performance impact whenever it initialises.
Because Event Dispatchers cannot carry information, each time the custom event is called it must loop through the children (buttons) to find which one is being hovered over. This means that for very large lists of buttons there may be a slight delay. This could be improved by splitting large containers into smaller sub containers (e.g. one very large box → three boxes), so that there are fewer items to search.
Each box would require its own custom hover and unhover events, but this as simple as only the reference to the box (e.g. ‘Vertical Box 140’) would need to be changed. Alternatively, in C++ it might be possible to create a custom bind event with a ‘target’ output, meaning the custom function would be able to target the instigator button directly (avoiding any looping).
You’re a star, Stomatopoda
<3
Hope it’s useful! If you’re using a new- version of the engine the ‘for’ loops can be simplified away with the getAllChildren() node.
2022, UE4.27.
This is driving me crazy… How did you drag your “Vertical Box 140” component into the graph of HUD/Widget???
I have my buttons in a “Grid Panel” which is a child of the Canvas Panel. I can see the list of my Canvas components (Button, Text box, Grid, Image) > when in Designer mode.
But when I click the Graph tab > the Canvas-Hierarchy list disappears, and now lists Functions, Variables, Animations… no components of the Canvas…
…except at Animations, it shows my 3 buttons and Image. But no Grid Panel which the buttons are in! So how can I drag my “Grid Panel” (component/reference) into the Graph > to use your code to get its children Buttons???
Im in UE4.27. Can you show a picture of this please? I tried looking for it (but dont have the correct references yet). Ty
UPDATE: answering my own question (it wouldn’t let me edit).
In Designer tab-mode, look at the Left panel – select the component (Grid Panel) –
– look at Right panel at the top > where it says Details and Grid Panel – check “Is Variable.”
Then when you click the Graph tab (top right corner), you can look at Left panel, and it lists “Grid Panel” component to drag into the graph.
I wish people would show a picture of the steps they say to do…
It may seem obvious to look at the top Right panel and see there is a check box. But not when the layout for “UMG” (UE’s widget designer) doesn’t match normal Blueprint coding, and not when I was never shown this in a tutorial video. Thus my mind didn’t think to look. Thus why a picture is helpful on forums.
