.tool{
	cursor:help;
	position:relative;
}

.tool::before,
.tool::after{
	position:absolute;
	left:50%;
	opacity:0;
	z-index:-100;
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after{
	opacity:1;
	z-index:100;
	transform:scale(1) translateY(0);
}

.tool::before{
	border-style:solid;
	border-width:1em .75em 0 .75em;
	border-color:#3e474f transparent transparent transparent;
	bottom:100%;
	margin-left:-.5em;
	content:"";
	transform:scale(.6) translateY(-90%);
	transition:all .6s cubic-bezier(.85, -.18, .31, 1.26), opacity .65s .5s;
}

.tool:hover::before,
.tool:focus::before{
	transition-delay:.2s;
}

.tool::after{
	background:#3e474f;
	border-radius:.25em;
	bottom:180%;
	color:#edeff0;
	width:17.5em;
	padding:1em;
	margin-left:-8.75em;
	content:attr(data-tip);
	transform:scale(.6) translateY(50%);
	transition:all .65s cubic-bezier(.84, -.18, .31, 1.26) .2s;
}

.tool:hover::after,
.tool:focus::after{
	transition-delay:0s;
}