.tooltip-wrapper {
	display: inline;
	position: relative;
}

	/* 悬浮窗样式 */
	.tooltip-wrapper > .tooltip-bubble {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(-100%, -50%);
		background: white;
		border-radius: 10px;
		padding: 16px;
		width: 250px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		z-index: 1000;
		margin-right: 15px;
	}

		/* 箭头 */
		.tooltip-wrapper > .tooltip-bubble::before {
			content: '';
			position: absolute;
			right: -8px;
			top: 50%;
			transform: translateY(-50%);
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 10px solid white;
		}

	/* 悬停显示 */
	.tooltip-wrapper:hover > .tooltip-bubble {
		opacity: 1;
		visibility: visible;
		transform: translate(-100%, -50%) translateX(-10px);
	}

/* 响应式 */
@media (max-width: 480px) {
	.tooltip-wrapper > .tooltip-bubble {
		left: 50%;
		top: 0;
		transform: translate(-50%, -100%);
		width: 180px;
	}

		.tooltip-wrapper > .tooltip-bubble::before {
			left: 50%;
			top: 100%;
			transform: translateX(-50%);
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-top: 8px solid white;
		}

	.tooltip-wrapper:hover > .tooltip-bubble {
		transform: translate(-50%, -100%) translateY(-10px);
	}
}