Disabled buttons triggering wrapper's mouseout event

Help Requests
1

Hi, I have a button within a wrapper. The wrapper has mouseover/out events to display a tooltip in certain situation.

<div mouseover.delegate ="showToolTip()" mouseout.delegate ="hideToolTip()">
            <button click.delegate="btnFunc()" disabled.bind="disabled"></button>
</div>

It triggers the mouseover/out outside the edges of the div, which is nice. However, even though the button is disabled, and within the wrapper div, it triggers the mouseout event of the wrapper, effectively “hiding” the tooltip. Can I suppress this somehow?

Update: I have read that “mouseenter” and “mouseleave” would solve this, but it doesn’t seem that Aurelia supports them?

1 Like
2

“mouseenter” and “mouseleave” are events that doesn’t Bubbles.
so you can’t use them with delegate.
but you can use them with trigger.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
https://aurelia.io/docs/binding/delegate-vs-trigger/

3 Likes
3

Excellent, it works now. Thanks!

1 Like