Lit: update toolbox text based on click and reset text to default on mouseoff

Question

I have a component with the following property which is used as my tooltip text

@property()
copyText = 'Click to copy';

I see that I can create a function that updates the text using the @click expression and that I can use @mouseout to update the text to its default. I can't figure out how to make the text change back only after the tooltip fadeout animation occurs after moving the mouse out. I'm using the shoelace tooltip if that makes a difference.

Thanks for your help!

Answer 1

It looks like shoelace tooltip has an event sl-after-hide that fires after the animation is complete. https://shoelace.style/components/tooltip?id=events

You can add a listener for that event instead of mouseout.