If you look at my public link there is a dropdown menu (find a bail bondsman fast). The drop down is a bunch of links one for each county in the state. I want the user to be able to hover over one of the links when they open the dropdown menu and then a tooltip (basically a textbox inside a div) will popup to the left of the dropdown menu. Any ideas on how to do this?
It is possible to do, but you will have to change “Dropdown links” on “Link blocks”. Because, unfortunately, it is impossible to put anything inside the “Dropdown link”
So when you have a Link block (you can give it same class, it will be styled exactly as you have it now)
you can put “Tooltip div” inside that block
Link block will have position: relative and Tooltip div - position:absolute
by using absolute positioning you move Tooltip div on the position that you want and give it z-index higher than all menu links
make Tooltip div display: none and opacity:0%
Create interaction for Link block (“dropdown link”) with Hover trigger:
trigger = Hover, affect different element = Tooltip div, Limit to nested element
Wow, thanks @sabanna, job well done! I appreciate all of the time and effort you went into responding and providing the fantastic video for me to use as a tutorial. Looks like that solution will work perfectly.
Worked like a charm. At least it taught me what I needed to know but I ended up having to do it a little differently. Basically same principle but I removed it from the main navigation as a dropdown and simply made it side by side columns in a page section. Found it was just too confusing and clumsy in a smaller screen-size like a mobile phone which is primarily the target market because with about 75 links (counties) thats a lot of page scroll. Works much better this way and changed the tooltip to popup on first click and disappear on second click or hover out. Plus now will be easier to style and align everything properly for the different screen sizes.
Well I might have spoke too soon it is not working out as a solution or else I am doing something wrong or there is some sort of bug in webflow. What I am trying to do is have the tooltip popup if you click on any one of the links, for obvious reasons if you look at what the purpose is. However the issues seems to be not being able to have a unique text popup for each link using this method. FOr example if you go to the navigator and you choose the first COUNTYLINKS (ARKANSAS) and choose the tooltip div and subsequently the agenttext (you have to change the tooltip div opacity to 100% to see it)- anyways, you cannot edit the agenttext. It always jumps down to the one in “CLEBURNE” regardless of which link you choose. SO seems you cannot have them be separate to each other for some reason which makes me think either I am doing something wrong or it is a bug.
Actually per my last message I think it is some sort of bug. Because I can modify text in the tooltip div if I for example, paste the div directly to the link and then make the modification. But later, if I try to go back to that particular one and edit it, the system sends me each time back to the last one I had edited. So, as a workaround what I’d need to do is put the content I need into each one of them one by one and have it all correct the first time. But later if I need to make an edit on a particular one, which is likely, I’m screwed unless can figure out why it is doing that and fix it.
Reason of your problem is that you did not set to links position: relative. And its end up that all tooltips positioning relatively to Section (closest element in structure with position: relative). That’s why all tooltips appear in the same exactly place
yes that was the problem as far as that goes. Its overly tricky regardless because you have to hide the text link by link so you can edit the current one and then each one has to be re-positioned again link by link for all screen sizes. There are so many counties I cannot think of a better way to do this in webflow and have it work elegantly (an imagemap would be nice but webflow doesn’t offer image mapping (easily) but when it is all said and done should look great just a lot of work to get it there. There are other, better solutions in things like wordpress like using a store finder plugin perhaps but I want to stay in webflow for this one. The webflow CMS might offer a better way to do this via a dynamic data collection but since it is hosted on webflow I can’t go there.
You could create google map with all counties “points” by using “My maps” in google account and add all info to every point there. Then get a code from google maps and use it in Webflow embed widget.
Yeah I like the first option how did you do that? Will have to see how it looks/works in phones. Thought about the google maps but its not overly friendly responsively in smaller screen sizes. It is and it isn’t but you have to know what to do as the user in order to make it show up well on your phone and we have to dumb this down so to speak.
Do not hesitate to ask if something will go wrong