Tooltip

by manland

HTML

<div class="tooltip">
	OK
</div>

CSS

.tooltip {
    margin-top: 50px;
	width: 500px;
	height: 100px;
	background-color: #ccc;
	position: relative;
	border: 4px solid #333;
    border-radius: 5px;
}

.tooltip:after, .tooltip:before {
	border: solid transparent;
	content: ' ';
	height: 0;
	bottom: 100%;
	position: absolute;
	width: 0;
}

.tooltip:after {
	border-width: 9px;
	border-bottom-color: #ccc;
	margin-top: -10px;
    left: 50%;
    margin-left: -9px;
}

.tooltip:before {
	border-width: 14px;
	border-bottom-color: #333;
	margin-top: -10px;
    left: 50%;
    margin-left: -14px;
}