How do I replicate this in Bubble?

Tanvi2 · 2021-12-02T06:24:02.167Z

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 · 2021-12-02T07:04:12.385Z

Hi there @Tanvi2,

This is what I would do:

Create a floating group aligned to the left and floats both
Add the icons you’d like
Create the tooltips using Group Focuses attached to the icon, change the offset to however you’d like it
Add conditions under the icons so that whenever it’s hovered the colors change or whatnot
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 · 2021-12-03T06:08:14.833Z

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

system · 2022-02-10T06:24:11.292Z

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