Streaming live at 10am (PST)

Tooltip on hover


#1

Hey everyone, I am currently working on a website that will heavily use tooltips to display information (text and a Vimeo video). I found a tooltip tutorial at http://tympanus.net/Development/TooltipStylesInspiration/ which looks amazing but when I tried it on my site http://thecomeback.webflow.io/ after exporting code, it doesnt work or more precisely it only works once and then requires page reload. This problem disappears when I delete Webflow.css but that throws rest of my site in disarray.

Does anyone know how to make a proper tooltip or one similar to that on Codrops site in Webflow? I read somewhere here on this forum that tooltip was possible but couldnt find a tutorial on that.

I will really appreciate any and all help. Thanks.


#2

That's quite possibly one of the coolest sites I've ever seen @zebualvi smiley Excellent use of parallax smiley

You could make your own tool tips in Webflow if you wanted to? And make them positioned absolute. And put an interaction of display on hover and fade out/display none on hover out. Are you putting one over each of the fun character guys?

Really, awesome looking site! Did you build all of those characters in Webflow?


#3

Thanks @Waldo_Broodryk, I'll give custom tooltips a go then, thanks for the idea. I do plan on putting a tooltip on each character since every character in my game will have a backstory that will be told via animation. Decided to go with tooltip because it's unobtrusive and displays relevant information only when you need it. It might pose an issue on different resolutions which is one of the major requirements for my assessment but ill start with step 1 for now.

I built my characters and all BG elements in Photoshop and just placed them in bit by bit, which became quite tedious but webflow really sped up the process. Glad you you liked it.

Cheers man, appreciate the quick reply.


#4

My pleasure @zebualvi smile love this work! That would take FOREVER haha. My solution for the tool tips is having some kind of visual kew that there is a tool tip on mobile. wink With absolute positioning you can get pretty close as well. smiley


#5

Nice site!

Tooltips are quite "easy" to create in Webflow using it's interactions and smart use of properties. I use it quite often. Example: http://vaizra.com/


#6

@rowan,

beautiful site! love how neat and clean it is.

SeanK


#7

Thanks @rowan, you site looks amazing. ill give interactions a go, hopefully it will work out alright. If it doesnt work, ill simply go with Jquery though i'm trying to build everything, or atleast as much as possible, using Webflow. Appreciate the reply.

Thanks again.


#8

I really like those tool-tips.

Good job on the parallax.


#9

@rowan those tool tips are lovely and now I understand how to make ones like that! The pulsing effect is awesome smiley haha. Amazing job on that smiley

Waldo smiley


#10

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