Forum Academy Marketplace Showcase Pricing Features

How to display extra info on hover for repeating groups?

I’d like to display extra info on hover for repeating groups, and want each item to extend beyond it’s natural size on hover to accommodate the extra information. (See image below as an example)

Any ways to do this in Bubble?

I have just done a very quick demo for you as one approach, see the link below and then hover over the 3 green boxes that have “main content” in them. https://dave-auld-demo-stuff.bubbleapps.io/version-test/group_collapse_demo?debug_mode=true

You might also be able to do a better version with overlayed floating group or other groups that become visible when the underlying control is hovered. Then play around with borders and shadows to get the correct look.

1 Like

Thanks @DaveA. I’m playing around as well and showing / hiding a group on hover solves the immediate problem but shifts the rest of the content on the page down which isn’t the desired effect. Will try floating groups. That may be the solution. Good thinking. Thanks.

Got it. The solution is:

  1. User a Group Focus object
  2. Set it relative to an item within the cell of the RG (but not the RG itself)

One Important Addition. The trick to getting Group Focus to work with a RG is to set it as a regular Group first (not a Group Focus). Then set it up to display on hover, etc. Once that logic is set-up, then “Replace” the Group with a Group Focus, and you can set the content within the Group Focus to reference the RG’s cell. The logic of display on hover continues to work (but isn’t available to be created when it’s a Group Focus) so it’s quite an elaborate work-around.

8 Likes

After replacing with Group Focus, how do you set the focus to reference the RG’s cell?

I had a text element in the first row, when i make it reference that, it just puts a weird characters into its reference, and doesn’t seem to work.

Yeah, it’s definitely quite an elaborate workaround.

I don’t recall the details, but I believe what I did is set the reference when it’s a group focus. Basically - when it’s a group focus I’d set the parameters that I can only set when it’s a group focus. And, when it’s group I’d set the parameters that I can only set when it’s a group. I toggeled between a Group and Group Focus a number of times, from what I recall.

I hope this helps. Best of luck!

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