.hint { position: relative; display: inline-block; }

.hint:before, .hint:after {
	position: absolute;
	opacity: 0;
	z-index: 1000000;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	pointer-events: none;

}

		
.hint:hover:before, .hint:hover:after {
	opacity: 1;
}

.hint:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 6px solid transparent;
	position: absolute;
}
		
.hint:after {
	content: attr(data-hint);
	background: rgba(0, 0, 0, 0.8);
			color: white;
			padding: 8px 10px;
			font-size: 12px;
	white-space: nowrap;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}


/* top */

.a1:before,.a2:before,.a3:before {
	bottom: 100%;
	left: 50%;
	margin: 0 0 -18px -5px;
	border-top-color: rgba(0, 0, 0, 0.8);
}
		
.a1:after,.a2:after,.a3:after {
	bottom: 100%;
	left: 50%;
	margin: 0 0 -6px -25px;
}

.a4:before,.a5:before,.a6:before {
	bottom: 100%;
	right: 50%;
	margin: 0 -5px -18px 0;
	border-top-color: rgba(0, 0, 0, 0.8);
}
		
.a4:after,.a5:after,.a6:after {
	bottom: 100%;
	left: 0%;
	margin: 0 0 -6px -50px;
}

.a7:before,.a8:before,.a9:before {
	bottom: 100%;
	right: 50%;
	margin: 0 -5px -18px 0;
	border-top-color: rgba(0, 0, 0, 0.8);
}
		
.a7:after,.a8:after,.a9:after {
	bottom: 100%;
	right: 50%;
	margin: 0 -25px -6px 0;
}
    
.hint-top:hover:before {
	margin-bottom: -10px;
}

.hint-top:hover:after {
	margin-bottom: 2px;
}