Return to Snippet

Revision: 7345
at July 18, 2008 15:51 by fredaudet


Initial Code
<a href="#">Roll over here <span>Pure Css Tooltip</span></a>

<style type="text/css">

/* general */

	body {
		margin:0;
		padding:40px 80px;
		background:#fff;
		font:70% Arial, Helvetica, sans-serif;
		color:#555;
		line-height:180%;
		}
	h1, h2{
		font-size:180%;
		font-weight:normal;
		color:#555;
		}
	h2{
		font-size:140%;
		}	
	p{
		margin:1em 0;
		width:500px;
		}
	a{
		color:#f20;
		text-decoration:none;
		}
	a:hover{
		color:#999;
		}
	
	/* // here comes the goodnes  */	
	
		a{
			z-index:10;
			}
		a:hover{
			position:relative;
			z-index:100;
			}			
		a span{
			display:none;
			}
		a:hover span{
			display:block;
			position:absolute;
			float:left;
			white-space:nowrap;
			top:-2.2em;
			left:.5em;
			background:#fffcd1;
			border:1px solid #444;
			color:#444;
			padding:1px 5px;
			z-index:10;			
			}			
		
	/* // goodnes  */

/* // general */

</style>

Initial URL


Initial Description


Initial Title
Pure CSS Tooltip

Initial Tags
css, html

Initial Language
HTML