Forum Academy Marketplace Showcase Pricing Features

Workaround for Showing GroupFocus on Hover

Hello Everyone :slight_smile: Here is a workaround on how you can show a GroupFocus when a Button (or any element) is hovered. To test this, I created three elements:

  1. Hover Button
  2. Group Focus
  3. Hidden Button (completely transparent, not visible on page load)

To show the GroupFocus when the Hover Button is hovered, you can set the conditional formatting on the Hidden Button to be:

“When Hover Button is hovered or GroupFocusA is hovered --> This element is visible”

Then you need two events in the workflow, with the first being ‘Do When Condition is True – Every Time’ (Hidden Button is visible) --> Element Actions --> Show ‘GroupFocusA’.
The second event needed is ‘Do When Condition is True – Every Time’ (Hidden Button isn’t visible) --> Element Actions --> Hide ‘GroupFocusA’. You can also use the same idea to Animate other elements when a button is hovered. Be careful with the workflow count though :slight_smile:

Preview:

Editor:

10 Likes

Great, thanks for posting this!

1 Like

No problem at all! :blush:

Hey I am just wondering. What is the purpose of this?

Why can’t we set a condition on a group which is when the button is hovered AND this gorup is hovered -> this group is visible.

It’s because the conditional formatting for GroupFocus elements doesn’t include the ‘this element is visible’ option, so the workaround is show/hide the GroupFocus through the workflow every time the hidden button becomes visible (which is when the hover button is hovered, in this example).

But why use a groupfocus for this purpose? a standard group would be good no?

A Group could work but if you have a reusable element that’s a header, the header will need to expand the length of the Header+Group to include the Group (which would mean really large headers). Instead, each GroupFocus is always attached to its “reference element” and you don’t need to enlarge the header to fit the GroupFocus.

Header sizing with a GroupFocus element:

Header sizing with a Group element:

3 Likes

And it does not influence the responsive layout.

Raymond | appSimplicity

2 Likes

I have to say I have not experienced that. I made this site faketubes.com and in that I made the upload button show a group on hover. The upload is attached to the header which is a reusable element and the group doesn’t seem to make the header any bigger.

I’ll do some playing around and try and understand the use case for this.

Thank you SO much for this hint. I was seriously beating my head on this one. It works like a charm.

1 Like

How do you make this work for repeating groups?

Hi @nomads32n :slight_smile: You can set this up by using a reusable element which contains the more icon and the groupfocus element. Then place the reusable element inside your repeating group.

Within the reusable element, instead of clicking the icon to show the groupfocus element, you can use the hidden element workaround from this thread to show the groupfocus, when the icon is hovered. That should work! :slight_smile:

2 Likes

This is a great workaround for this ‘this element is visible’ not being available in GroupFocus conditions.

Just one question: where did you place the hidden button? I guess it doesn’t matter too much, but did you make it tiny and place it somewhere in a corner? Above the hover button? Just looking for best practice. Thanks.

1 Like

Hi @cheol.rim :slight_smile: There is actually an easier way to do this now, which doesn’t involve any hidden elements. Here is the step-by-step post on how to set this up: Hover to Reveal Shape + Do when shape is not visible = Not Working

1 Like

That is so brilliant and weird. Amazing that it works. But, like the previous solution, the process has to be repeated and applied to the focus group as well, right? Otherwise, hovering over the button reveals the group, but the group once the mouse is moved over to the group. Or maybe I missed something.

Also, when doing that, is there a difference between selecting ‘This GroupFocus’ vs the specific name of the element?

This seems to work nicely:

image

  1. When either the button or the groupfocus element are hovered, the groupfocus is visible
  2. When both the button AND the groupfocus element are not hovered, the groupfocus is hidden

Hi,

I have gone through the entire thread and I have set the workflow as per the @fayewatson suggested.
In the header, I have created a Text element (case studies) and when the user clicks on it, it will display the Submenu (Group focus1), and when the user hovers on the Previous Case studies it will display another submenu (Group Focus2).
But the issue is when the user goes from one Submenu (Group Focus 1) to another Submenu (Group focus 2), Group Focus 2 gets hide
or you can say when the mouse moves from Group focus1 to Group focus 2, Group focus 2 hides.
I have made a short video on this

Please let me know if I am missing any step.

Thanks

Hi,

Does any one got any solution for this one.

Thanks

Try this:
Change GroupFocus2 to a group within GroupFocus1 that is hidden. Call it something like “Group Submenu”.
Create a Custom State within GroupFocus1 called something like “whichMenu”.
Show Group SubMenu when any of the menu items are hovered and set whichMenu to the appropriate state based on the menu item that is hovered.
Then within Group Submenu add 4 different groups, 1 for each sub menu, all hidden. Add a condition to each to show if whichMenu is this group’s value (1 - 4).

This will almost certainly work. The only downside is that you lose the relative positioning of the Group Focus 2, but that is a small price to pay to get this working flawlessly.

2 Likes