Showing Repeating Group Data outside of RG - On Hover

[doug4]

I have an Icon or Group inside of a repeating group. When that icon is hovered (not clicked), I would like to have it show information from that repeating group parent in a popup or floating group, etc.

I was able to get this to work easily enough IF the group showing the information fits within the boundaries of the repeating group row. Unfortunately, that is not an option, I need a larger space. Is there a way to display the data outside of the repeating group when an object is hovered?

In the workflow actions, I can set something to display the data in the group, but it seems to be only possible when an item is clicked, not hovered. Any ideas?

[lindsay_knowcode]

Yes it would be nice if there was an onHover event, but (AFAIK) there isn’t. (and I just tried it myself to see if there was a tricksy way somehow to get the cell id somehow with visibility of an element, but no luck)

A while back someone posted this - I notice the example doesn’t work but I think the concept is sound - fire an event onHover from javascript …

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

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): 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. A …

[jared.gibb]

Dropping that will clear your path!

[sudsy]

@doug4

it seems to be only possible when an item is clicked, not hovered. Any ideas?

First, it should be noted that hover is a bad idea if one cares anything about mobile. If the users are known to be on desktop, then here’s one possible approach…

• Hover Reveal

-Steve

[lindsay_knowcode]

Edited for clarity
Oh that @sudsy is a thing of beauty kudos - Very nice pure Bubble implementation

Alternatively, if you really felt like it - someone has wrapped up the js to trigger the hover event with a plugin.

Hovered Action Plugin for Bubble, by Tout-en-un

[doug4]

@lindsay_knowcode

A while back someone posted this - I notice the example doesn’t work but I think the concept is sound - fire an event onHover from javascript …

Thank you for the information. If the On Hover plugin doesn’t work as expected, I will dig into this deeper.

@sudsy

First, it should be noted that hover is a bad idea if one cares anything about mobile. If the users are known to be on desktop, then here’s one possible approach…

This looks to do exactly what I was hoping, thank you for sharing. I will install and give it a try. The mobile issue shouldn’t be a problem for this implementation as it will only be used for desktop users. keeping mobile in-mind is a great reminder though.

Thank you everyone for the help.

[sudsy]

@doug4

This looks to do exactly what I was hoping, thank you for sharing. I will install and give it a try.

Just to clarify, there is nothing to install with my proposed solution. It’s pure Bubble - no plugin required.

It has its drawbacks (popup always appears in same position relative to the hovered item - i.e. it can’t smartly reposition itself if it’s near a screen edge), but it’s a workable solution in some situations.

Good luck,

-Steve

[doug4]

@sudsy

Just to clarify, there is nothing to install with my proposed solution. It’s pure Bubble - no plugin required.

It has its drawbacks (popup always appears in same position relative to the hovered item - i.e. it can’t smartly reposition itself if it’s near a screen edge), but it’s a workable solution in some situations.

Thank you Steve, I did overlook that. I’m reviewing your sample editor now, but I must be missing something. I see the ‘Hover Detector’ element and the Group Focus, but I don’t see where the workflow or conditions are set to display the data or show the Group Focus. Can you please help me figure this out, it seems like it may be the best solution.

[sudsy]

@doug4

Thank you Steve, I did overlook that.

No prob, Doug. I think Lindsay’s reply might’ve been a tad confusing, as it seemed to praise the pure Bubble solution and at the same time provide a link to a plugin (which isn’t needed).
 
 

@doug4

I don’t see where the workflow or conditions are set to display the data…

No workflow needed. The RE simply references the parent element’s Thing. Check the Type of content setting for the root element of the Hover Detector RE. Just set that to the same data type as the containing element - in this case, the type displayed in the RG.
 
 

@doug4

…show the Group Focus.

Check the workflow tab of the Hover Detector RE. All should become clear.

-Steve

[doug4]

@sudsy

Check the workflow tab of the Hover Detector RE. All should become clear.

Ah, that is what I was missing, thank you!

[lindsay_knowcode]

@sudsy @doug4 Apologies for adding confusion

[sudsy]

No worries.