Streaming live at 10am (PST)

Pop up bubble trouble! funky interactions and trouble going responsive


#1

Hey there, my client has a site designed by pronto that i'm redesigning in webflow so that he doesn't have to keep paying them monthly dues forever. He has paid for rights to all the content, design, etc. so it's totally ok that we're doing this (just fyi).

His current site is at http://www.broadbandconsultingservices.com/. What i'm trying to recreate is the section labeled "IN THE BUSINESS WORLD AND IN TELECOMMUNICATIONS
IT’S ALL ABOUT THE CONNECTIONS" that has the square icons with business logos. When you click on them a pop up bubble pops up with info about the company.

I sort of have it figured out for the regular computer screen but it gets all wacky when I try to make it responsive. If you play with the screen sizing on the original site you can see how the logo blocks change to grid and yet the popup bubbles still work. I would love to know, in general, how to do popup bubbles like this. i feel like this should be a basic easy thing to do since it seems to be on every website, kind of like the drop down menu in the navbar. how do you make bubbles that just pop up over anything anywhere? it's like they're not even in a container of their own at all... but follow around a parent object?

The other issue that i'm having is with the interactions themselves. i have checked and checked again to see that the design for every logo square and every pop up bubble is the same but on some of them one bubble pops up and on others, you click on the logo and bubbles pop up over several of them. so frustrating!

i've been trying to figure this out off and on for about 2 weeks and i'm so frustrated!

oh also, an added layer of frustration is that the logos are within a slider because there are a total of 12 logos on 2 sliders.

help!

Kierstin


Here is my public share link: https://preview.webflow.com/preview/broadband-consulting-services?preview=96f72f8dc753d57e77395302dc3d0aaa
(how to access public share link)


#2

I have found your issue - or at least one of them!

Both your Body and 'Slide 1' have the interaction 'hover trigger' which is why the first hover window shows up on any of them that you click, or when you click anywhere for that matter.

If you take the interaction off on these two elements you are good to go!


#3

Hi @Grafiiq

Thanks for making the post.

There are several ways to achieve the pop up bubbles.

One way is to:

  • Set all of the pop up bubbles to position: absolute and set all the "partner logo div block" to position: relative

  • define the dimensions of the bubbles in px or vh so they retain shape and position them where you'd like

  • Set the interactions to Limit to sibling elements

  • Add position: none to your "hide" interaction, and change the click interactions accordingly (make sure the first click sets display: flex and the second goes back to display: none)

Let me know if you need clarification on any of this :slight_smile:


#4

ahhhhh genius! i never would have spotted that! i guess i accidentally set the interaction when those two things were highlighted. awesome! you're a stud!


#5

hey perfecto! thanks so much! it was the absolute that finally did what I was trying to do. still doing some minor tweaking but I think it's about there! you guys are amazing!

one last thing that I would like to make happen if it's possible...

is it possible to make the pop up bubbles responsively "sticky" to the top of the logo squares? right now, i have the margins set and it's different for different devices but doesn't flow vertically very responsively. the result is that with smaller screens the bubbles pop up closer to the squares or overlap and with larger screens they pop up with a larger gap. i would love for them to always pop up stuck to the edge of the logo square. any thoughts?


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.