Disabled buttons triggering wrapper's mouseout event

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

“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

Excellent, it works now. Thanks!

1 Like