Hover icons similar to gmail

[ciaranob155]

I will be building an app that will have a list of templates. Imagine a menu with a title “Templates” and under it a simple list of templates created by the user. That looks possible from the tutorials I have seen.

But I would like a user to be able to hover over that list of templates and have icons like delete and duplicate show, similar to how Gmail currently has icons for mail in your inbox on hovering. I do not see these hover options in Bubble.

Is there an alternative way to use Bubble to implement hover icons?

[marcusandrews]

Yeah, you can do this, and it’s easy, if I understand what you’re talking about. Check out the demo if you don’t understand.

First, create a group that is hidden on page load.

Then, create a condition for it to show only when a particular object is hovered over. For example, in the demo, the condition is ‘When Group Hover is Hovered > This Element is Visible’

All you need to do is include the buttons you want in the ‘Hover Group’

Bubble Editor - forumapp2018

[ciaranob155]

Cool. Will try it out.

[keith]

What @marcusandrews describes is exactly how you do this in Bubble. Keep in mind though that “hover” is meaningless on mobile/touch devices. So it’s a good idea to consider that when designing such interfaces.