Hello. I'm trying to prototype a delayed hover interaction. The behavior I'm trying to prototype is as follows:
1) When hovering over an icon, provide a hover effect (change color). Change back to initial state onMouseOut
2) When lingering over the icon (i.e. hovering for x seconds), display a flyout with additional options. Reset this timer onMouseOut (so the flyout doesn't show in less than x seconds / immediately the next time the user hovers over the icon)
3) Hide the flyout onMouseOut (immediately)
I'm having trouble reliably achieving 2) using delays. Any guidance? Adding a screenshot of what I'm currently trying to achieve 2). I think I need to set/clear timeout in a different manner, but wasn't sure how to do it.
Thanks for the help!