Forum Academy Marketplace Showcase Pricing Features

How to display RepeatingGroup's Thing data on a popup?

There’s “When user click an element”, but no “… user hover on element” at all.
Why?
I need to display a popup and change some data in it when user hover on RepeatingGroup’s Thing… Please, help! I absolutely don’t understand how can I do it
:frowning:

Hi @AnFlare You can’t display a popup on hover, but you can use a group that becomes visible when something is hovered in a repeating group. You could have statements such as when ‘button’ is hovered ‘this group is visible’ and also when ‘this group is hovered, this group is visible’ to make sure it stays when the user moves their cursor over it.

@fayewatson Thank you for your answer! You are absolutely right, I can “When RepeatingGroup is hovered then show FloatingGroup (for example)”. But what I really need is “When Text in RepeatingGroup is hovered, then show FloatingGroup and (more better!) display this hovered Text in Text within FloatingGroup”
I.e. I need a way to do something like in this site. When you hover on anime image, it displays a hint with this anime info.
This is what I can’t get…

I unfortunately don’t think you can set hover visibility conditions for floating groups in a repeating group in that way. But, if your repeating group cell is wide enough to hold a group, and change its visibility on hover using that. Then you could have text elements or even groups within that group that contain dynamic data, and are visible/not visible on hover when different elements in that cell are hovered?

Preview:

Editor:

1 Like

Thanks, it’s a nice alternative how one can solve this kind of task!
But, unfortunately, this doesn’t fit me, because I have a very narrow table with small cells… that’s why I thought about displayin data on some kind of popups.

BTW, I see a title doesn’t fit to this topic. Changed it to something more convenient.

Right, no problem :slight_smile: I’m not sure if this edit would work for you, but I think it may be better than my previous idea. I made the group ‘collapsable’ when the buttons ‘name’ or ‘color’ are not being hovered. That way the cell group grows/shrinks depending upon if the group is shown. It will expand the row or column total length at the time the group is visible, but I think it may be an alternative for keeping really small cells:

Editor:

Preview:

Yes, @fayewatson’s method is really the only way I am afraid. Don’t know any way to get the cell’s “reference” to something outside the repeating group on a hover. You can do it on a click of course.

@fayewatson
@NigelG
Thanks to you, guys! It seems my app needs a rethinking about design because of this Bubble restriction…
I don’t understand why @emmanuel and all other Bubble staff discriminate onHover event by not adding it to Events. It’s a second base mean of control along with onClick :frowning:

1 Like

@AnFlare I think I read that it’s because if you had workflows attached to ‘when this is hovered’ that could trigger a ton of workflows and not be a safe idea for people’s apps

1 Like

Hi @AnFlare, @NigelG and @fayewatson,

i might have found a solution for workflows triggered by hover (within RG’s) after all, thanks to the brilliant toolbox plugin shared by @mishav (Toolbox plugin - collection of utility elements):

  1. I have a Repeating Group containing a HTML Element. It has some simple JavaScript Code watching the hover state of a div within the HTML element. The div and the EventListener both have been set up with dynamic ID’s/names, based on the current cells index.

  2. A hover event now fires a function, which passes the current cell ID from the HTML element on to bubble.

  1. With the help of the toolbox plugin by @mishav we now can trigger a workflow in bubble. Since we can receive the index of the hovered cell, it should be totally possible to trigger an individual workflow based on that specific cell.

Here comes a preview:

And here is the dev page:

I hope somebody will find this useful.

Cheers Jeremias

6 Likes

Wow, that’s awesome @js1! Thank you so much for the example and steps :smiley: Looking forward to using this at some point!

1 Like