/*
===============================
鼠标悬停时title属性提示框样式
===============================

 /* 通用颜色变量 */
 :root {
	--tooltip-bg-color: rgb(10, 150, 145);  /* title属性提示框背景色 */
	--tooltip-text-color: #fff;  /*  title属性提示框文字颜色 */
 }
 
/* 自定义tooltip样式 - 现代化悬停提示 */
[title] {
	position: relative;
	cursor: help;
}
[title]:before,
[title]:after {
	position: absolute;
	transition: all 0.18s ease-in-out;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	z-index: 10000;
}

/* 提示内容 */
[title]:before {
	content: attr(title);
	background: var(--tooltip-bg-color);
	color: var(--tooltip-text-color);
	padding: 8px 12px;
	border-radius: 6px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	width: max-content;
	max-width: 300px;
	text-align: center;
	font-size: 13px;
	font-weight: normal;
	left: 50%;
	transform: translateX(-50%) translateY(-10px);
	bottom: 100%;
	margin-bottom: 10px;
	line-height: 1.4;
	white-space: normal;
}

/* 小三角形 */
[title]:after {
	content: '';
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: var(--tooltip-bg-color) transparent transparent transparent;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	margin-bottom: 4px;
}

/* 悬停时显示 */
[title]:hover:before,
[title]:hover:after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0.1s; /* 稍微延迟显示，避免鼠标快速经过时闪烁 */
}

/* 禁用某些元素的自定义tooltip */
input[title], textarea[title], select[title] {
	cursor: default;
}

input[title]:before, input[title]:after,
textarea[title]:before, textarea[title]:after,
select[title]:before, select[title]:after {
	display: none;
}

/* 针对特定元素的tooltip位置调整 */
[title][data-tooltip-position="bottom"]:before {
	bottom: auto;
	top: 100%;
	margin-bottom: 0;
	margin-top: 10px;
	transform: translateX(-50%) translateY(10px);
}

[title][data-tooltip-position="bottom"]:after {
	bottom: auto;
	top: 100%;
	margin-bottom: 0;
	margin-top: 4px;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent var(--tooltip-bg-color) transparent;
	transform: translateX(-50%) translateY(0);
}

[title][data-tooltip-position="bottom"]:hover:before {
	transform: translateX(-50%) translateY(0);
}