I've created an interactive guide on how a piece of scientific apparatus works using Edge Animate, but I've ran into a problem and I'm hoping the community might be able to help me.
What I've Done So Far
- Created flyout tooltips that animate as users hover over each component of the instrument. This is achieved by using mouse over (play symbol from label) , mouseout (play reverse)
- Created descriptions of each component that display in a blue box beside the diagram as the parts are clicked on
The descriptions worked fine, but when I created the fly-out tooltips, I started encountering a problem. As I hover over the diagram, the tooltips are sticking in the mouse over state and not always disappearing on mouseout. If I scan the mouse pointer across the image all tooltips show up and remain on. I'm not sure if the problem is caused by the overlapping symbols.
Does anyone know what could be causing this problem? I'm fairly new to Edge Animate, so I'm sure it will be something quite obvious to a more experienced user.
Message was edited by: Ross_P
Hi Ross, you might want to start with replacing 'mouseover' with 'mouseenter', and 'mouseout' with 'mouseleave'.
'mouseenter' and 'mouseleave' will give you more predictable results than 'mouseover' and 'mouseout'. In my experience, "mouseover" and "mouseout" can have weird behavior if your symbol has nested objects. As your mouse moves over the nested objects, it will cause errant "mouseout" events to trigger.
you need to have mouseenter and mouseover with same code, mouseleave and mouseout with the same code to prevent the problem from happening