Trigger: mouse over versus click
Mar 06, 2020
Hi.
I have a situation where I'm using a bunch of smallish buttons on a slide as a navigable menu (see attached gif). As there are twelve of these buttons, they can't be very big - which means that I needed to make an additional plan to let the user know what content is accessed through each button (there isn't enough space to put a full text description on the buttons themselves).
My idea was therefore to use two different triggers on each button: mouse over to get a pop-up caption per button that gives a fuller description, and click to actually access that content.
However, it now appears as though the two buttons are getting in each other's way. Specifically, the mouse over trigger prevents the user from clicking the button (the mouse cursor doesn't change to a hand). If I remove that trigger (or add a hotspot over the button), the button then becomes clickable, but then no explanatory caption appears anymore.
I guess the conflict lies in the fact that you can't click a button without hovering your mouse cursor over it first, hence activating both triggers, but is there a way to get a happy harmony between the two?
Thanks!
10 Replies
Hi Graeme
It hard to tell from the gif how you have created the state - so this may help you. Here is an example file. I've added the caption into the hover state.
What Wendy is saying is that it is your mouse over trigger that is most likely creating the problem. There is a built-in trigger that handles both mouse over and mouse leave. To take advantage of it, all you have to do is to create a new state named Hover, You can hoverover (mouse over) it, see a popup, and still click it. You will still need to create a click trigger.
Thank you for both for taking the time to respond. Appreciate!
I am not a big user of states generally, so incorporating the caption into a Hover state is something that would never have occurred to me. Thanks so much - the hover and click actions are now nicely differentiated.
However, I still have an issue. As can be seen in the attached screenshot, the caption that I want to have appear with the mouse-over now appears behind the other buttons on the base layer, and I can't seem to find a way to bring it to the front (the "Arrange > Bring to Front" option has no effect).
Any ideas on that?
Can you share the slide Graeme so we can take a look and the setup and see if we can help you.
Sure. Have attached a cut-down version. Thanks!
See if the attached works for you Graeme. I reordered the objects on the timeline and for the three along the bottom I changed the height / position slightly so they didn't overlap the third row. You may want to tweak the layout by moving the three top rows up slightly and the bottom row down slightly if you want the caption boxes the same size.
Hope this helps
Hi Wendy - thanks for this!
Reordering the items on the timeline does seem to have worked, but I'm not 100% sure why. I see you have moved the top row's three buttons to the top of the list, the second row's buttons after that, etc. I get that items towards the top of the list lie in front of items below them in cases where their positioning overlaps, but that effect seemed somewhat drastic in my case.
Be that as it may, I'm very happy that the top nine buttons' captions now appear above any of the other buttons, and while that still wasn't the case for the last three buttons, by reducing the size of their captions that is now fixed too.
Still a little mystified as to why this happened, but at least I have an approach to take now that will hopefully prevent this issue from happening again. Thanks so much for your time!
Hi Graeme
this is the explanation from the KB
All slide objects will be listed on the timeline. They'll be listed in the same order in which they're layered on the slide, with the topmost item in the list at the front (or top) of the slide. To change the order of an object, just drag it up or down the list.
As to why this happened, the various states of an object are at the same level as the object. So if one of the other buttons (if dragged over it) would cover the button in question, then the second button will cover all the states of the original. So your design needs to take into consideration the placement of states so they won't be covered.
The timeline serves two purposes. First it is a visual representation of where objects are located in time. The ones farther to the left appear sooner. It is also a visual representation of the stacking level of the objects on the slide. The ones higher on the list are above the ones below them. Dragging is the same, and sometime easier than using the arrange menu.
So with a lot of objects on the slide using states, it can be a challenge to arrange them so none of the states are covered.
Thank you.
I was 100% aware that objects stacked higher (vertically) on the timeline appear on top of lower objects if they overlap, but didn't know that this applied to their states too. As stated earlier, I don't make extensive use of states (clearly to my own detriment), so obviously I need to start paying attention to this going forward.
Thank you for everyone's input and assistance. A day gone by without learning anything is a day wasted!
This discussion is closed. You can start a new discussion or contact Articulate Support.