[data-tooltip] {
	position: relative;
	cursor: pointer;
}

[data-tooltip]:before {
	position: absolute;
	visibility: visible;
	opacity: 0;
	transition:opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,transform 0.3s cubic-bezier(0.5, 1.5, 0.5, 1);
	pointer-events: none;
}

[data-tooltip]:hover:before, [data-tooltip]:focus:before{
 	visibility: visible;	opacity: 1;}

[data-tooltip]:before {
	z-index: 100;
	padding: 3px;
	display: block;
	min-width: 60px;
	color: #999;
	content: attr(data-tooltip);
	letter-spacing: 1px;
	font-size: 7px;
	line-height: 9px;
	font-family:courier prime;
	text-transform: uppercase;
	text-align: center;
	background: rgba(255,255,255,0.4);
}

[data-tooltip]:hover:before, [data-tooltip]:focus:before {
	transform: translate(30px,6px);}