Variante HTML5 del primo esempio…:

codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Integrated tooltips</title>
<style type="text/css">
	span[data-descr] {
		position: relative;
		text-decoration: underline;
		color: #00F;
		cursor: help;
	}

	span[data-descr]:hover::after {
		content: attr(data-descr);
		position: absolute;
		left: 0;
		top: 24px;
		min-width: 200px;
		border: 1px #cccccc solid;
		border-radius: 10px;
		background-color: #ffffcc;
		padding: 12px;
		color: #000000;
		font-size: 14px;
	}
</style>
</head>
 
<body>

	

This is an example <span data-descr="collection of words and punctuation">text</span> with a few <span data-descr="small popups which also hide again">tooltips</span>. Take a <span data-descr="not to be taken literally">look</span>...
	</p>

</body>
</html>