Tooltip on hover for Nav Links (Link Blocks)

Hey, I want to create a simple tooltip that shows up when hovering on a link block inside my Nav Bar. Attached a screenshot and here’s my preview link for the nav bar: https://preview.webflow.com/preview/navigation-test-f9ac99?utm_source=navigation-test-f9ac99&preview=9f6aeb3f4ad73f99dbcf79b3af7c7e26 With some tweaks here and there I managed to create a decent-looking tooltip, but can’t figure out the interaction. I found a lengthy tutorial on the Webflow Blog (How to build tooltips | Webflow Blog) but I don’t need 100+1 interaction here, I just want some background colour to show up behind the icon and simultaneously the tooltip explaining the icon to appear… Same effect when hovering over the top nav icons of Youtube or Google.
37 59

Hi Blanca welcome to the webflow forum. Can you post your share link for the site so we can see your preview site.

Jeremy

Thanks, copied the share link into my original question. On another note, I’m not sure how helpful the share link will be. This is a working file and I intend to keep tinkering with it. Was just about to re-think the tooltip interaction. If I can’t manage it one way, I’ll go about it another way… So that preview file is probably gonna look different in a few minutes.

Blanca what you want can be done with a hover interaction. You need to use the interactions so you can make hover work on two elements at the same time.

I’ll show you how in a few min

You are basically there but it is disabled on the desktop so if you are testing it on that it isn’t showing

image

the other piece of the puzzle is you have the interaction set to class and all elements in the class , you want to switch that to only siblings. That way when you copy that tooltip to the other nav links it will only work on that particular navlink at a time not all of them.

let me know if you need further explanation but it works great
one thing you might want to adjust is currently the hover interaction is on the image, it would probably be more useful to apply it to the link block instead.

Jeremy

I changed the settings, but no interactions are shown when I hover over/hover out… I’ll try it the other way, make the div block expand to the left and the text appear next to the icon on hover. So, a bit different approach.

You actually had it all done and working here is a video to show you

You missed the last step of copying the actual tool tip to each of the nav links. Each nav link has to have it’s own tooltip for it to work. But you were right there with the implementation.

https://www.loom.com/share/a4dcae313060446093e7bc3da5c01773

Jeremy

1 Like

Thanks Jeremy! That’s awesome! I figured it was just a glitch with the Preview and I panicked. It shows the tooltip and all my items otherwise hidden upfront until I hover over them once and make them disappear. Once I’ve done that it works fine. Thanks for pointing out those settings though, really helpful.

1 Like