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.
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.
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.
I'm glad this thread helped you out - and in regards to your particular set up, I'd want to take a look at the slide in question. The hover doesn't automatically bring everything to the front that is being hovered, so it was likely that the other elements were still sitting at the front.
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?
It is hard to diagnose without seeing the file, but if an item is overlapping in the hover state, it would be best to make sure that item is below the item with the hover state in the timeline.
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.
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.
Thank you. The suggested solution is possible, but not elegant. I'll stick with the layer. I didn't find a tutorial on the timeline. I didn't realize the stacking order was important.
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?
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!
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.
17 Replies
may be better to use a layer on hover
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.
Thank you. Is it possible to have the layer work with the "hover" action though?
Yes ad a trigger to show on hover, by default it closes when you mouse off, I would add a layer fade transmission as well.
Hi Danielle, How about trying a trigger with a Show layer Action for When the "Mouse hover over" then pick your object? Would that work for you?
Thanks Kimberly, you beat me too it.
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.
Hi E,
I'm glad this thread helped you out - and in regards to your particular set up, I'd want to take a look at the slide in question. The hover doesn't automatically bring everything to the front that is being hovered, so it was likely that the other elements were still sitting at the front.
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?
Hello E,
It is hard to diagnose without seeing the file, but if an item is overlapping in the hover state, it would be best to make sure that item is below the item with the hover state in the timeline.
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.
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.
Thank you. The suggested solution is possible, but not elegant. I'll stick with the layer. I didn't find a tutorial on the timeline. I didn't realize the stacking order was important.
Hello E,
yes the order on the timeline does affect how things are placed in the slide.
Glad the layer option will work for you.
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
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!
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.