Tooltip / Infobox

dabblet.css

/**
 * Tooltip / Infobox
 */
body {
	background: #fafafa;
	min-height: 100%;
}

.spacer {
position: relative;
width: 50%;
padding: 4rem;
margin: 0 auto;
}

.tooltip {
position: absolute;
top:50%;
left: 50%;
	z-index: 2;
	border: solid 1px #ccc;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);    
	font-family: Georgia;    
	font-size: 14px;        
	transform: translate(-50%,-50%);
	padding: 8px 16px;    

}

.tooltip::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	height: 20px;
	width: 20px;
	background-color: #fff;
	transform: rotate(45deg);
}

.tooltip--triangle-b-c::after {
	left: 50%;
	bottom: -10px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	margin-left: -20px;
}

.tooltip--triangle-t-c::after {	left: 50%;	top: -10px;	box-shadow: -1px -1px 1px rgba(0,0,0,0.3);margin-left: -20px;}


.tooltip p {
	position: relative;
	z-index: 2;
	margin: 0;
}

dabblet.html

<div class="spacer"><div class="tooltip tooltip--triangle-b-c">
	<p>Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür,<br>daß sich Webseiten später leichter pflegen lassen.</p>
</div>
</div>
<div class="spacer">
<div class="tooltip tooltip--triangle-t-c"><p>Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür,<br>daß sich Webseiten später leichter pflegen lassen.</p></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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