Animation without Flash

Hi all,

For a client I need to make an “animation”. But the site needs to work for mobile users as well, so I can’t use Flash. What I want: a technical product with different components (they are numbered). When visitors hover one of the components a tooltip should pop up with a definition/explanation of the component. Can I do this with CSS and can someone point me to some kind of tutorial?

I was thinking of absolutely positioning the numbers, and combine that with a hover effect. Don’t know if this works well with the responsive site though.

Any advice?

You can certainly do that with CSS, but the first thing to consider is that hover doesn’t work on mobile, so it might be better to with tooltips based on clicks, which pretty much requires JavaScript. Do you have an image of what you want?

Hi, thanks for your input. What javascript do you suggest? I’m pretty good with css but not with Javascript :-/
This is the image:

Lots of good jquery examples out there you can look at.

I’m not totally sure what you are after, but this might help:

http://pop.seaofclouds.com/

There might be other options, like tab buttons that reveal more text etc. Really depends on what you want to see on the page.

Thanks that looks like something I can use!

Great. Give it a try and let us know how you go. :slight_smile: