CSS only tooltip

dabblet.css

/* CSS only tooltip */
body {
	background-color: #ddd;
}
.tooltip {
	background-color: #292929;
	border-radius: 10px;
	color: #fff;
	display: table;
	font: normal 14px sans-serif;
	height: 100px;
	/*line-height: 100px;*/
	margin:15px;
	/*padding: 10px;*/
	position: relative;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
	width: 180px;
}
.tooltip.shadow {
	box-shadow: 0 5px 5px rgba(0,0,0,0.4);
}
.tooltip p {
	display: table-cell;
	padding: 10px;
	vertical-align: middle;
}
/* desenha a seta */
.tooltip:after {
	border: 15px solid;
	border-color: transparent;
	content: "";
	height: 0;
	position: absolute;
	width: 0;
}
/* Posiciona a seta */
.tooltip.top:after {
	border-bottom-color: #292929;

	bottom: 100%;
	left: 50%;
	margin-left: -15px;
}
.tooltip.right:after {
	border-left-color: #292929;

	left: 100%;
	top: 50%;
	margin-top: -15px;
}
.tooltip.bottom:after {
	border-top-color: #292929;

	left: 50%;
	top: 100%;
	margin-left: -15px;
}
.tooltip.left:after {
	border-right-color: #292929;

	right: 100%;
	top: 50%;
	margin-top: -15px;
}

dabblet.html

<div class="tooltip bottom">
    <p>Here is a demonstration of a multi-line <b>tooltip</b>!</p>
</div>

<div class="tooltip right">
    <p>And here with a<br> right <b>arrow</b>!</p>
</div>

<div class="tooltip top shadow">
    <p>You can set a<br> <code>box-shadow</code>!</p>
</div>

settings.json

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