Show Group Focus When Other Element is Hovered

I struggled with this for a few hours, so figured I’d give a simple run down of the steps involved to get it working, especially as a menu.

My approach is to give a user a set of choices (based on a category) that when the category is hovered, a group focus will open with more choices (sub categories). Also important is when a different category is hovered it’s subcategories would become visible.

Another important point is that when no category is hovered, the last hovered category’s subcategories would still remain visible.

Firstly, here is my elements tree

Here is the page with all elements displayed in editor

Those three little empty boxes are the “group invisible” elements with a outline for visualization purposes only. In reality these should have no border and be invisible.

These “group invisible” elements are where I have set my conditions.

The Group Hover is the red squares on the page. For my actual use case, these Group Hovers are set in another group focus that is first displayed on a button click (not seen in this post).

You could set the group hovers in other group focus if you have multiple subcategories ( ie: clothes - mens clothes - pants - pleated - black )

In the workflow you set up like this:

Make sure you run this “everytime”

Menu-Options

30 Likes

Thank you @boston85719. This is a fantastic solution! I would never have figured out the “Every Time” nuance.
Building into my app now for new users to hover features to see additional details on the feature.

1 Like

No worries. This is also good for showing an image on hover, like when a product page has multiple thumbnails with one main large image. User can hover the thumbnail and have that image show up in the larger image without needing to press.

Very slick! I’ll bookmark this one as well. Thanks again.

1 Like

You saved me a ton of time with this. Awesome as always!

1 Like

Awesome. Why isn’t this stuff default behavior on Bubble? Why do we have to bend over backward to make an element visible on hover? :frowning_face:

6 Likes

Thanks for the content. I agree with benjamin, why is bubble making it so hard to build a normal menu, and other normal things. (global variables, loops…)

1 Like

loops are done with backend recurring workflows…not too difficult to set up

I’m not sure exactly what you mean by global variables, but I suspect it is what Bubble calls Option Sets.

2 Likes

“loops are done with backend recurring workflows”
I’ well aware of that, thanks. I use plenty of them on my site. My point is that many things which are standard logic require specific workflows built for those purposes. Loops for example shouldn’t need to be an extra internal service/backend, but a normal part of the logic in any workflow. Or would you consider creating something akin to an internal API just to run a loop as performant? Maybe if the page isn’t’ so complex, but once you have several layers of complexity, each “this is how it’s done in bubble” adds up.

When it comes to global variables I earlier searched for solutions for having a varible that keep tracks of things such as customer number, or order number. I do use a “bubble solution” and I’ve seen how others have solved it by using backend flows etc, but that again requires more work-around then if done programmatically. Bubble is great for many things, but then there are some basics which just isn’t there and needs to be done in nested ways, which slows down the performance even more.

This is the discussion and solution I use for global variables: Global variables in Bubble? It’s “easy” but still workaround as compared to just having a global variable. Instead a custom data-set, a search function, and a back-end workflow is required. For a variable.

I think as Bubble is built to be no-code, programmatically achieved concepts are not really built into the core of Bubble features, but perhaps you can add your idea to the list of ideas that users often submit to help Bubble improve their product for their users.

It is built to be no-code, just needs to be able to capture the core logic to make it as powerful as actual code. Just think there is some logic which is super-fundamental and shouldn’t require extra workflows.

I think it got like 80% of all the logic, at least that I need, and then the extra 20% requires either workarounds, or plugins, or javascript, and maybe 5% that I haven’t manage to get to solve at all within bubble even with those.

Blockquotebut perhaps you can add your idea to the list of ideas that users often submit to help Bubble improve their product for their users

Yup. I have an internal document where I write down things as I develop that I’ll send in, which I think would make it more awesome, just my 5 cents of course. Want to let some of the things boil so it’s just not me not figured out how to “bubble it”.

Wow - so smart and simple!

I struggled with this for hours too - and just when I decided to give up and google it, I found no one else but my first bubble mentor to walk me through it.

As always, thanks for the great help Matt!

2 Likes

Is there any update to this approach with the responsive editor?

Should still work just fine. Have you tested it in the new flexbox responsive system and found it not working?

1 Like

Weirdly… but trying again today it’s working well, maybe editor needed to be reloaded. No idea!

Love the idea - anyone an idea how to do click and hover? So we do not miss the touch devices without hover function?

To do a click, you can use the workflow action ‘when element is clicked’ and have an action that would be ‘show groupfocus’.

yeah that is the easy part, but the hiding… (without clicking outside the box)

How do you plan to hide it? If by clicking an element, then it would be the workflow action element actions hide and hide the groupfocus.

If you want to do it from the same element, then set a condition on the trigger for when the groupfocus is visible ‘hide group focus’ and other trigger with condition for when the groupfocus isn’t visible ‘show group focus’.

The problem with triggering an event when an element is/isn’t hovered is that the groupfocus gets stuck. It would be much better to just use the conditionals that are attached to the groupfocus, but the visibility checkbox doesn’t exist

Screenshot 2022-06-03 152850