[data-tooltip] {
	position: relative;
	display: inline-block;
}

[data-tooltip]:before, [data-tooltip]:after {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -3vh);
	z-index: 100000000;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transition: opacity .35s ease .25s;
	font-size: 2.4vh;
    font-weight: 400;
}

[data-tooltip]:before {
	content: attr(data-tooltip);
	background: #333;
	color: #eee;
	padding: 2vh 3vh;
	white-space: nowrap;
	bottom: 100%;
	border-radius: 1vh;
	box-shadow: 0 1vh 2vh -1vh rgba(0, 0, 0, 0.65);
}

[data-tooltip]:after {
	content: '';
	background: transparent;
	border: 2vh solid transparent;
	border-top-color: #333;
	margin-top: -1.2vh;
}

[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:active:before, [data-tooltip]:active:after {
	opacity: 1;
}

[data-tooltip].tooltip-multiline:before {
	width: 100vw;
	max-width: 24vw;
	white-space: normal;
}

[data-tooltip][class*="tooltip-bottom"]:before, [data-tooltip][class*="tooltip-bottom"]:after {
	transform: translate(-50%, 3vh);
}

[data-tooltip][class*="tooltip-bottom"]:before {
	bottom: auto;
	top: 100%;
}

[data-tooltip][class*="tooltip-bottom"]:after {
	bottom: -0.5vh;
	border: 2vh solid transparent;
	border-bottom-color: #333;
}

[data-tooltip].tooltip-bottom-left:before {
	transform: translate(-6vh, 3vh);
}

[data-tooltip].tooltip-bottom-right:before {
	left: auto;
	right: 50%;
	transform: translate(6vh, 3vh);
}

[data-tooltip].tooltip-top-left:before {
	transform: translate(-6vh, -3vh);
}

[data-tooltip].tooltip-top-right:before {
	left: auto;
	right: 50%;
	transform: translate(6vh, -3vh);
}