Hi,
We have a node with an adornment that is created via mouseEnter and removed via mouseLeave.
It seems that navigating within the parts inside the node is triggering the mouseLeave event, hence blinking the adornment as the user tries to click it.
I am uploading a GIF but, unfortunately, it doesn’t show the cursor, which is moving from the icons to the adornment.
Is there anyway to tackle this issue? Thank you.
Did you declare the mouseEnter and mouseLeave event handlers on the Node or on some object inside the node?
How have you defined the Adornment? When the mouse enters the adornment it leaves the node.
That must be our issue, the mouseLeave event is triggered as we hover the adornment, making it disappear (which is what we want when the user leaves the node but not to click the adornment, but because he “leaves” the node completely.
The adornment is set on the node, yes.
Not sure if we should somehow control if the user is hovering the adornment itself, in order to “cancel” the removal of the adornment…
There are a lot of possible behaviors, and I do not know what you want.
I assume you already know about ToolTips. GoJS Tooltips -- Northwoods Software
Have you seen the Hover Buttons sample? Buttons that show on Hover
Many other behaviors can be implemented.
Buttons that show on Hover is a good example, which actually highlights our issue: the adornment wouldn’t go away if you leave the node without touching the adornment and leaving it afterwards… I’m trying to get that effect for us.
The behavior that you cite – the Adornment not disappearing when the mouse leaves the Node without entering the Adornment – is intentional. Depending on how you define the Adornment it’s way too common to accidentally leave the node without entering the Adornment. And it’s particularly easy to happen if the Node has “holes” within its bounds, where mouse events pass through to whatever is underneath.
But if you want the behavior that I think you are asking for, just uncomment the assignment of { background: "transparent" } in the Adornment in that Hover Buttons sample. There are actually two of them, and you can decide which one you like better.
Got it, thank you for the detailed explanation. The transparent background works perfectly for single nodes, but it’s a problem when we have groups inside groups (we display adornments at each level of the grouping).
I think we might just keep the current behaviour as it is.
I’ll mark the solution. Thanks again.