When icon is hovered - show menu - how to?

Need help
1

I am trying to set up a textbox/menu element that appears when the icon is hovered just like on this screenshot below:
20 PM

This is my setup right now:

01 PM
01 PM808Ă—1692 71.3 KB

Question: How can I make sure that once the icon is hovered, a clickable element appears on the right side, next to the icon? Just like how the bubble tool box is placed next to the icons on the sidebar menu.

2

Like this?

onhover

If that is what you need then:

  • Create a group focus item, which will hold the appearing items
  • Create an icon
  • Create a group with background colour set to none and no elements inside and set border to none so it is effectively invisible to the user and uncheck its “Visible on page load” option so it is not even shown on first loading.
  • Then set the group´s condition to be visible when Icon is hovered, OR groupfocus is hovered.

firststep
firststep537Ă—509 35.8 KB

  • Then create a workflow that triggers when a condition is true: as shown in the below image first section(5th menu item) and set the condition to be when group is visible then trigger… and as an action make the groupfocus show (or as I did, animateIN)
  • Then create a second workflow that HIDES (or animatesout) the group focus which action is triggered when the group is NOT visible.

workflow
workflow805Ă—1701 116 KB

5 Likes
3

@decntdefalt This is one of those tricky Bubble things you only learn over time. What you’re trying to do is use the conditions on the Icon itself, which makes sense at first. You’re trying to say, “When this thing is hovered, do this other thing.” The way Bubble works, however, is in reverse.

You’ll actually go to the group you want to show/hide, and use the conditional panel to say, “When that other icon is hovered, then make changes to me.” This is exactly what @chris7 is describing in his example, so follow those steps and it should work!

3 Likes
5

After hours of trying I almost gave up. Posted a detailed post here asking for more help. But right after, I finally pulled it through Amazing help!
27 PM

Thank you @chris7 :smiley:

6

No prob, Im a beginner too hehe, just trying to give back the little i know.

2 Likes
9

This topic was automatically closed after 70 days. New replies are no longer allowed.