States have unintended overlapping content in Hover

How do I properly use hover and states to display information?  I want the user to hover over a picture (not click) to reveal more information.  Hence, I have added information to the hover state. 

See below for the desired effect and my actual sad result.

Does Storyline even have this capability?  

17 Replies
Ashley Terwilliger

Hi Danielle,

I'd agree with Phil here, since you have so much information using a layer with the additional speech bubble may be easier to set up than individual states for each item. You can trigger a layer based on the "mouse hover over" a particular object, so you'll still get the same effect. 

E Pachella

I ran into a similar problem.  Thanks for making it easy for me to find the solution quickly!  :-)

Just curious why my implementation didn't work.   I added the object in the "Hover" state and made sure to bring the object forward.  My results were not satisfactory due to unintended overlapping as in the original example above.

E Pachella

Thanks Ashley.  I've already removed the hover state with the overlap and used the layer solution.  The thing that was troubling to me as a new user was that while I was editing the hover state the display appeared just like I wanted it to.  Should I have tried to explicitly move the overlapping objects to the back?

E Pachella

Thanks for your reply.  I am making slow progress on this module.  In the attached story the hover state is used on the first 3 ovals and a layer is used for the last "Conclusion" oval.  Only the layer gives the desired effect when the mouse hovers.  

I also cannot get the drag items to shuffle.    Thanks for you time.

Emily Ruby

Thanks for sharing the file E.

Just looking at the three items with the hover state, they are at the bottom of the list on the timeline, so their hover states will be behind the rectangles. It looks like you need the rectangle to be on top of the text boxes in the design, so it may be best to stick with using the layers for this file.

If you wanted to stick with the Hover state, you could add a text box over top of the rectangles that are in the top of the timeline, and add the state to that.

See attached, I added this to the Audience Paragraph only.

Christiane Knutzen

HI @ all,

I know his thread is a bit olde rbut I got a similar problem. The layer solution doesnt work good for my case, cause I have the hoover states in a drag and drop quiz. This overlapping is really just a visual problem but it makes me freaking out.

I would be glad if someone got an idea on my case or maybe a workaround?

Thanks in advance

Crystal Horn

Hi Christiane. Thanks for sharing your file. I saw how after dropping the notes on the corkboard, other notes' hover states were showing behind the notes on the corkboard.

Here's what's happening:

Hover states will adopt the same position on the timeline as the normal state. That means if an item is further down on the timeline, it will show under other objects higher up on the timeline if they overlap. This includes the hover state.

The catch here is that you're making a drag-and-drop. When you drag an item, it becomes "active." Now it displays on top of everything else so you can see it as you drag it across the slide. After dropping it, the object is still at the top of the timeline. Other objects will show behind it (including the hover state) when they overlap.

The workaround:

I'm sure you noticed that when you started dragging the notes that showed "behind" the corkboard notes, that they jumped to the top. I can't think of another workaround for you besides putting the hover state information on a layer. I realize that's a bit of work, but if it will help you not feel like you're freaking out, maybe it's worth it!

I changed the top 3 (Picture 11, 10 and 9) notes to show the information on a layer. I attached your modified file so you can see how that works!

Christiane Knutzen

Hi Crystal,

many thanks for your effort. I tried working with layers but I had the problem that the layer covered the item, and I wasn't able to to move it anymore.

Your work is fixing the problem but the text boxes will remain in the layer position. That could confuse our learners :/
Meanwhile I worked on another layout to avoid that problem.

I do understand how this hover states work, I thought there might be a possibilty to add a trigger to make them 'always shown first position'. Hope that makes sense.

It's always the small things, layout problems that made me clueless.