Streaming live at 10am (PST)

Tooltips/Popups


#1

Hi all...

I see some past posts on here where people are requesting how to do pop-up tooltips something like Webflow have themselves on their pricing page https://webflow.com/pricing

I'm surprised it seems there is nothing in Webflow to do this.

Is there no other way but make these as layers with relative positions and action them to show hide on hover of an help icon div? ...I can work this out for the small amount I have to do but I'm surprised I can't find this as something Webflow already makes easy.

Any pointers before I do this a long way around?

Thanks


#2

those tool tips were created in webflow.

it's just a bunch of divs assigned to various interactions.


#3

I have made some using interactions this afternoon. I will probably replace them with some that follow the cursor. Having an interaction for each and class for each is not very efficient if I end up with a lot of them.


#4

Hi @mfin,

It is not necessary to have tons of classes and tons of interactions. Enough too have right structure.
For example, if all tool-tips will have class .t-tip and will be nested in a div with "original" element, div could have class .t-tip-div. So create one interaction for div: hover trigger, affect different element (.t-tip), affect only nested element, appear on hover.
With such structure you can use same ONE interaction on many elements with tool-tips.

Cheers,
Anna


#5

Thanks, I understand that immediately, I must have overlooked the 'affect only nested element' possibility too.

Just wondering though, if done like this, then when I want to type all the content of each tip I would make .t-tip css as block so I can see them, but then they'd all appear and overlap all over the place (as they are quite close together) so I wouldn't be able to edit each one's text easily.


#6

Just some rough "scheme" how it could be done


#7

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