States have unintended overlapping content in Hover

Dec 18, 2013

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
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.

This discussion is closed. You can start a new discussion or contact Articulate Support.