#no-js

How to make a tooltip without javascript

A friend asked me how to make a tooltip without javascript.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”LEVKaR” default_tab=”result” user=”willpower”]See the Pen <a href=’http://codepen.io/willpower/pen/LEVKaR/’>tooltip test</a> by Felipe Nunes (<a href=’http://codepen.io/willpower’>@willpower</a&gt;) on <a href=’http://codepen.io’>CodePen</a&gt;.[/codepen_embed]

CSS and Stuff : Pure CSS Parallax Scrolling Background

Hello there, welcome to the first in the series of “CSS and Stuff”, today I’m going to be showing you how to do parallax scrolling (with an image background as an example) using only a few lines of CSS! Can you do this with Javascript? Yes. Is my way better?Yes! It’s fast, small code and doesn’t require anything other than good ol’ HTML and CSS. Plus it loads using the GPU!

The Markup

Firstly, I…

If you'd like to see this live on jsfiddle instead, click here If you are making a website that should be compatible without javascript, or just don't want to slow down the page with lots of scripts, this is a great trick. And it's really easy.

First of all you need to hide the div that's going to be shown on hover of something (let's say on hover of an image, since that's very typical). This is really easy in CSS, a little display:none; should do the trick.

#showonhover{ display:none; }

Now we are going to make the whole show on hover thing. Here's how:

<style> #showonhover{ display:none; } .showdiv:hover #showonhover{ display:block; /* when .showdiv is hovered, #showonhover will be visible */ } </style> <div class="showdiv"> <div id="showonhover"></div> </div>

no-js slider