details标签不支持title属性，需用data-tip配合summary:hover与::after伪元素实现hover提示，确保语义清晰、定位准确且兼顾可访问性。
details标签本身不支持title属性，hover提示得靠CSS实现
直接给 <details> 标签加 title 属性是无效的——浏览器会忽略它。因为 <details> 是交互式容器，不是原生可提示元素（如 <input> 或 <abbr>）。想实现悬停显示提示文字，必须用 CSS 的 ::before 或 ::after 伪元素配合 content 和 attr()，再控制显隐逻辑。
用data-tip属性 + CSS伪元素生成hover提示
这是最轻量、无需JS的方案，关键在于把提示文本存在自定义属性里，再用CSS读取并渲染：
<details data-tip="点击展开查看配置详情"> <summary>系统配置</summary> <p>这里是详细内容...</p> </details>
对应CSS：
details[data-tip] {
position: relative;
}
details[data-tip]:hover::after {
content: attr(data-tip);
position: absolute;
top: 100%;
left: 0;
background: #333;
color: white;
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
white-space: nowrap;
z-index: 1000;
margin-top: 4px;
}
details[data-tip]:hover::after {
/* 可选：加一点过渡，但注意伪元素transition兼容性有限 */
opacity: 1;
transform: translateY(0);
}
details[data-tip]::after {
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s, transform 0.2s;
}-
position: relative是必须的，否则::after的top: 100%无法相对于<details>定位 -
z-index: 1000防止被其他元素遮挡，尤其当<details>在折叠状态下高度很小时 - 不要用
display: none控制显隐——它会破坏transition；改用opacity+transform
summary上hover时才显示提示更合理
用户真正想看提示的时机，是鼠标移到 <summary> 上（即那个可点击的标题栏），而不是整个 <details> 区域。否则展开后悬停在内容区也会触发提示，体验混乱。
立即学习“前端免费学习笔记（深入）”；
只需把选择器从 details[data-tip]:hover 改为 details[data-tip] summary:hover，并确保 summary 是相对定位上下文：
details[data-tip] summary {
position: relative;
}
details[data-tip] summary:hover::after {
content: attr(data-tip);
/* 其余样式同上 */
}- 这样提示只在鼠标进入
<summary>时出现，与用户操作意图一致 - 如果
<summary>里有内联元素（比如图标），可能需要加display: inline-flex或display: block确保定位稳定 - 注意 Safari 对
summary:hover::after的支持较晚（iOS 16.4+/macOS 13.3+ 才完全可靠）
移动端和可访问性要注意什么
纯 CSS hover 提示在触摸设备上基本无效——没有“悬停”概念。而且屏幕阅读器不会读取 data-tip 或伪元素内容，对无障碍不友好。
- 如果提示信息重要（比如说明功能用途），应放在
<summary>文本里，或用aria-label显式声明：<summary aria-label="系统配置，点击展开">系统配置</summary> - 避免依赖 hover 提示传递关键操作指引，它只是辅助增强
- 真要兼容触屏，得加 JS 监听
touchstart并临时显示提示层，但那就超出纯 CSS 范畴了
伪元素提示本质是视觉糖，别让它掩盖语义缺失的问题。
