[data-tooltip],
[data-tooltip-bottom] {
	--arrow-size: 10px;
	--tooltip-color: gray;
	--tooltip-text-color: white;
	--scale: 0;

	position: relative;
}

[data-tooltip]:hover,
[data-tooltip-bottom]:hover {
	--scale: 1;
}

[data-tooltip]::before,
[data-tooltip]::after,
[data-tooltip-bottom]::before,
[data-tooltip-bottom]::after {
	position: absolute;
	top: -0.25rem;
	left: 50%;
	transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
	transition: 50ms transform;
	transform-origin: bottom center;
	font-size: 1rem;
	z-index: 9;
	pointer-events: none;
}

[data-tooltip]::before,
[data-tooltip-bottom]::before {
	--translate-y: calc(-100% - var(--arrow-size));

	padding: 0.5rem;
	min-width: fit-content;
	width: 100%;
	background-color: var(--tooltip-color);
	color: var(--tooltip-text-color);
	text-align: center;
	border-radius: 0.3rem;
	content: attr(data-tooltip);
}

[data-tooltip]::after,
[data-tooltip-bottom]::after {
	--translate-y: calc(-1 * var(--arrow-size));

	content: '';
	border: var(--arrow-size) solid transparent;
	border-top-color: var(--tooltip-color);
	transform-origin: top center;
}

[data-tooltip-bottom]::before,
[data-tooltip-bottom]::after {
	top: revert;
	bottom: -0.25rem;
	transform-origin: top center;
}

[data-tooltip-bottom]::before {
	--translate-y: calc(100% + var(--arrow-size));

	content: attr(data-tooltip-bottom);
}

[data-tooltip-bottom]::after {
	--translate-y: var(--arrow-size);

	border-top-color: transparent;
	border-bottom-color: var(--tooltip-color);
	transform-origin: bottom center;
}