tooltip.css

/* 悬浮气泡触发容器。 */
.tooltip {
	--tooltip-text-color: #fff;
	--tooltip-bg-color: #333;
	position: relative;
	cursor: pointer;
}

/* 分别使用 ::after 和 ::before 伪元素绘制悬浮气泡的方框和箭头。 */
.tooltip::after,
.tooltip::before {
	/* 位置：居中于父元素上方。 */
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	/* 初始时隐藏。 */
	opacity: 0;
	visibility: hidden;
	/* 平滑过渡动画。 */
	transition: opacity 0.4s ease;
	/* 避免被其他元素遮挡。 */
	z-index: 1000;
	/* 为 font-size 使用相对单位，以便随父元素进行缩放。 */
	font-size: 0.8em;
}

/* 悬浮气泡的方框。 */
.tooltip::after {
	/* 从 HTML 的 data-tooltip 属性中获取提示文本。 */
	content: attr(data-tooltip);
	/**
	 * 调整间距，使其与箭头正确对齐。
	 * 悬浮气泡的箭头（::before）的边框宽度为 0.4em，因此其总高度为 0.8em（2 × 0.4em）;
	 * 减去 0.1em（0.8em - 0.1em = 0.7em）
	 * 可在悬浮气泡的方框与箭头之间形成最佳的视觉连接，
	 * 既避免重叠，又保持外观的无缝衔接。
     */
	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::before {
	content: "";
	border: 0.4em solid transparent;
	border-top-color: var(--tooltip-bg-color);
}

/* 鼠标悬停时显示悬浮气泡的方框和箭头。 */
.tooltip:hover::after,
.tooltip:hover::before {
	opacity: 1;
	visibility: visible;
}