[data-tooltip] {
	position: relative;
	cursor: pointer;
	white-space: nowrap;

	&::before {
		content: attr(data-tooltip);
		position: absolute;
		bottom: 100%;
		left: 50%;
		padding: .25em .5em;
		border-radius: 5px;
		background: rgba(0,0,0,.8);
		color: white;
		pointer-events: none;
		opacity: 0;
		transform: translateX(-50%);
		transition: all .2s ease-out;
	}

	&:hover, &:focus {
		&::before {
			transform: translateX(-50%) translateY(-10%);
			opacity: 1;
		}
	}
}