Forum Academy Marketplace Showcase Pricing Features

Show Group Focus When Other Element is Hovered

I just used groups with the old responsive editor and the hover condition worked fine, but with the new responsive editor, it has a transparency problem in the repeating group

Screenshot 2022-06-03 154622

Need to setup workflows as in the tip to hide them when the element is not hovered.

In there lies the problem. Sounds like a good feature request.

You are likely using that in a align to parent container and would need to set the group to ‘bring to front’ to adjust the z-index of the elements.

That’s where it gets stuck, when you have a workflow that hides them when an element isn’t hovered. That’s why you have to use the conditional attached to the element.

Also, the z-index was brought to the front, it’s just bugged cause it’s the beta responsive editor, and it wasn’t an align to parent container

Just used this for a client and it worked brilliantly! :raised_hands: Thanks for the great tip @boston85719 !

1 Like

For those interested, in order to get this working in a RepeatingGroup you’ll need to put this inside of a Reusable Element.

Here’s an example of this working:
Editor: Dow-coaching | Bubble Editor
Demo: Dow Coaching

Screen Shot 2022-08-18 at 7.19.21 AM


hey. almost what i need. 1 issue.
If i make the repeating group’s type of content to the option set ‘test number’.
then the repeating group can not take data source for the individual cells (in text) from a data type of ‘Category’.
what to doo

Take what the tip showcases as an example and apply it to your specific use case. In this situation I recommend not using the text as the data type and instead use your ‘Category’.

already using that.
Basically, the RG text element takes information -name of category - from the parent group’s Type of content ‘Category’.

Perhaps there has been a new update that has made this much easier but, I got it to work by creating 4 different “Do When” workflows:

#1) Do when “element” is hovered → Action = Show GroupFocusX
#2) Do when “element” isn’t hovered → Action = Hide GroupFocusX
#3) Do when GroupFocusX is Hovered → Action = Show GroupFocusX (So that the groupfocus doesn’t keep disappearing when trying to click something inside that groupfocus)
#4) Do when GroupFocusX isn’t Hovered → Action = Hide GroupFocusX (To overwrite the previous workflow)

Hope that helps! :slight_smile:

That is another good approach. Uses a few more steps to get there, but likely works equally well. Thanks for sharing.

can you please explain this in detail?

Agree with your solution. But there is another simplest way we can do that. It might have some limitations but it works fine in my use case.

  1. Add GroupFocus and any content in that GF. Hide the content inside the GF and make it Collapse when hidden.

  2. Make GF width/height and margins 0. If there’s any border/background style then also make it none.

  3. Now add the relevant element to that group (GroupTarget) which need to be hovered.

  4. Change properties of GF to your desired width/height, background style or anything and make content visible inside the GF upon hover of GroupTarget.

See the screenshots below


:white_check_mark: Don’t forget to make GroupFocus visible on page load

I was reading this approach and thinking this is not possible because it is not possible to make the group focus element visible on page load, and then I saw this portion of not to forget to do that…how do you make the group focus element visible on page load?

I just checked the editor to verify if there was some change, but do not see it, as far as I can tell the group focus element still works as it always has, which is, it is not possible to be visible on page load, and to show it, you have to run a workflow action to show it, and to hide it you can run a workflow action or click off the side (ie: onto the page itself) to allow it to close automatically.

The automatic closing brings up another issue, how to do you register that the group focus element was closed by the user clicking off the side?