FAQ pop-up on hover over on ? (question mark)

Hey fellow flowers,

I would like to make a pop-up when hovering the mouse over the question mark on a page.
Ex. look at this page where it pops up with a FAQ on why you should choose annually instead of monthly.

Thanks in advanced.


Here is my public share link: LINK
(how to access public share link)

I believe you are wanting to accomplish something similar to this right?

Link: http://sandbox-025540.webflow.io/

Hover-over the question mark please.

yeah something like that!

I’ve since read that it is also called a tooltip.

How did you accomplish this?

Use interactions! You want to create your little tool tip as a div that sits “absolute” within it’s parent which is set to “relative”. Then create an interaction that tells that tooltip to have an initial appearance of 0% opacity and move him up a hundred or two pixels.
Make the interaction on hover and move him back down and up his opacity. Then set another upon hover out that moves him back to his original position and opacity of 0%.

Boom!

Couple of videos about interactions if you have not had the joy of using yet!

1 Like

Just thinking that interactions will make the site code heavy as I need to make several divs with their own interactions?

you just make one interaction and have it affect a child/sibling. Why are you concerned about “code heavy”? How much heavier do you see that making it?

1 Like

Yes interactions. Sorry I didn’t see this… busy couple of weeks.

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