Download

Need some advice on how I should handle Button OnHovered for popup widget

Hi,

I’m making a simple inventory and all items get listed on their own button in a scroll box. I made a popup widget that is created and set to the mouse current position when the mouse hovers (OnHovered) over the items inventory button and removed (OnUnHovered) when the mouse is off the button. So far that works great but the only problem I have is, I would like the popup widget to follow my mouse while hovering over the button. I have tried a timer/event tick, and set the mouse coordinates on mouse OnHovered, then .250 seconds later and compared them. If they are the same the popup just stays there, if they are different it sets the position of the widget in the viewport at the current mouse location. This kind of works but there has to be another way because the popup widget starts to blink and freaks out a little. It don’t look smooth.

Thanks

Bump? Bump? please?

Here’s a crude example of how this could be set up:

Every button is a separate widget and hosts the following logic:

buttonLogic.jpg

I think this is what you’re after:

80983b324e7fcdc0470da320d0a77f95a2c770b8.gif

Do note: ideally, you should move the tick logic to some other blueprint, you do not want 100 buttons in your inventory duplicating the same code or ticking unnecessary. OnEnter/Leave could (event) dispatch data to a managing class which would take over and move the tooltip around. Depends on how complex this is going to be, of course.

[HR][/HR]
Alternatively, you could abandon Tick and rely on the widgets’ built in tooltips:

alternative.png

In this case, you just bind the variable and everything else happens automagically.

Hi, thank you for the Post but could you explain it a bit more because im new here and i have problems because i have no idea what do you “SET” after event tick.

Also this “On mouse Enter” “on mouse leave”

The node after Tick is actually a validated Get node - you can convert object variable to their Validated equivalent by RMB on the node and choosing Convert to Validated Get:

validatedGet.png

It gives you a chance to handle behaviour in case the object becomes invalid - instead of generating an error, it will simply fail silently if the objects ceases to exist, for example.

Setting Position in viewport tells the tooltip widget to be at the cursor position. I’m adding a small offset to display the tolltip further away from the cursor.

[HR][/HR]
OnMouseEnter/Leave are overridden widget Events - these events will fire once when the cursor enters/leaves the *Visible *part of the widget:
Here the Root [dragButton] and the Border are both set to *SelfHitTestInvisble *but the Button is Visible:

1f34ccef47863279222e774012adcf07b97e8cc3.png

OnMouseEnter/Leave will trigger when you touch the button, not the border. (at least until the whole widget becomes a child of another widget)

[HR][/HR]
The override dropdown menu is somewhat hidden:

cb14e0b11fb6a68d1f2c6be41a29eb75ee5f3c76.png

Thanks for trying to help me out you are awesome, this community is great! I actually figured out a way to do this but not sure if it’s the best way. I am going to try one of your ways to see if I like it because it looks like a lot less code/wires…

This is what I came up with so far, it basically stores your mouse position and compares it after a set delay then positions the widget
1.jpg
c0ed8a4c868be71fba602c81da157cf4f0c13b1d.jpeg
0d10960df1570350714f6dbac305588b8c1dbd8d.jpeg