tooltip css3

dabblet.css

span{
	color:#333;
	font-size:1.2em;
	font-family:'Helvetica';
}
span[data-tooltip]{
	color:#396;
	position:relative;
	display:inline-block;
	cursor:help;
}
span[data-tooltip]:before{
	display:inline-block;
	content:'';
	height:.8em;
	width:.8em;
	background:#33ff00;
	margin:0 .2em;
	border-radius:700px;	
}
span[data-tooltip]:after{
	display:block;
	content:attr(data-tooltip);
	padding:.1em .3em;
	background:#33ff00;
	position:absolute;
	left:0;
	margin-left:1em;
	top:100%;
	display:none;
}
span[data-tooltip]:hover:after{
	display:block;
}

dabblet.html

<span>Hallo Welt</span>
<span data-tooltip="test">this</span>
<span>is nothing compared to a tooltip</span>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}