tooltip.css

/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

/* Tooltip trigger container */
.tooltip {
	--tooltip-text-color: #fff;
	--tooltip-bg-color: #333;
	position: relative;
	cursor: pointer;
}

/* Create tooltip box and arrow using ::after and ::before pseudo-elements */
.tooltip::after,
.tooltip::before {
	/* Position: centered above the parent element */
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	/* Initially hidden */
	opacity: 0;
	visibility: hidden;
	/* Smooth transition animation */
	transition: opacity 0.4s ease;
	/* Prevent being obscured by other elements */
	z-index: 1000;
	/* Use relative units for font-size to scale with parent element */
	font-size: 0.8em;
}

/* Tooltip box */
.tooltip::after {
	/* Get text from HTML data-tooltip attribute */
	content: attr(data-tooltip);
	/* Adjust spacing to properly align with the arrow.
	   The arrow (::before) has a border-width of 0.4em, so its total height is 0.8em (2 × 0.4em).
	   Subtracting 0.1em (0.8em - 0.1em = 0.7em) creates optimal visual connection between
	   the tooltip box and arrow, preventing overlap while maintaining seamless appearance. */
	margin-bottom: 0.7em;
	padding: 0.8em;
	border-radius: 2px;
	background-color: var(--tooltip-bg-color);
	color: var(--tooltip-text-color);
	white-space: nowrap;
}

/* Tooltip arrow */
.tooltip::before {
	content: "";
	border: 0.4em solid transparent;
	border-top-color: var(--tooltip-bg-color);
}

/* Show tooltip and arrow on hover */
.tooltip:hover::after,
.tooltip:hover::before {
	opacity: 1;
	visibility: visible;
}