How do I replicate this in Bubble?

[Tanvi2]

Hello all,

Would anyone be able to replicate the left side navbar seen in this video?

Basically I want to create a left side navbar 70px in width, each vertical block being 55px in height with an icon inside. On mouseover, the icon will change color and a tooltip block will appear to the right of the icon with text the same color as the mouseover icon color.

I’m not sure how to approach this after creating a Group > Setting it to Column > Adding vertical link blocks. Then I’m not sure how to proceed.

@adamhholmes @cmarchan @johnny I’d really appreciate any help with this

[johnny]

Hi there @Tanvi2,

This is what I would do:

1. Create a floating group aligned to the left and floats both
2. Add the icons you’d like
3. Create the tooltips using Group Focuses attached to the icon, change the offset to however you’d like it
4. Add conditions under the icons so that whenever it’s hovered the colors change or whatnot
5. Create “When true” workflows under the workflows tab that makes the group focus for a corresponding icon appear when hovered. I usually do this in a hacky way, bear with me:

• Under an element’s condition, do “Icon’s hovered,” then copy that condition and paste it into the “When true” workflow I just described.

Just repeat that process for the remainder of your icons + tooltips.

I hope that made sense and helped!

Let me know if you have any questions

[Tanvi2]

Thank you @johnny ! I will have a go with this approach.