标签不能直接作提示框使用，需通过css脱离文档流、自定义定位与样式，并配合js处理键盘和移动端交互，否则会破坏布局且无障碍支持不足。
details标签默认没有提示框样式，得手动加CSS
浏览器对 <details></details> 的原生样式非常简陋，点击后只是展开内容，既没边框、阴影，也不像 tooltip 那样浮在文字上方。想当提示框用，必须自己控制定位、外观和触发逻辑——它本身不是 title 属性那种轻量级提示，不能点一下就消失，而是「可展开的交互容器」。
常见错误是直接套用 <details><summary>❓</summary>提示内容</details> 就以为完成了，结果提示文字堆在页面流里，遮挡正文，或者鼠标移开就关不掉。
- 必须用
position: absolute或position: fixed脱离文档流，否则会撑开布局 -
<summary></summary>默认是块级元素，要改成display: inline或inline-flex才能贴着文字对齐 - 需要监听
toggle事件或用:focus-within+tabindex支持键盘操作，否则无法通过 Tab 键访问
用CSS控制details的弹出位置和外观
提示框的关键是「指向性」和「视觉隔离」。把 <details></details> 套在目标文字内，再用 CSS 把 <summary></summary> 设为透明占位符，把 <details></details> 的 open 状态样式作用于子内容（即提示框本体）。
示例结构：
<p>这个参数<details class="tooltip"><summary tabindex="0"></summary>表示请求超时时间，单位毫秒</details>会影响重试逻辑。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
对应关键 CSS：
.tooltip {
display: inline;
position: relative;
}
.tooltip > summary {
display: inline;
outline: none;
padding: 0;
border: none;
background: transparent;
cursor: help;
}
.tooltip[open] > summary::after {
content: "ⓘ";
display: inline;
margin: 0 2px;
font-size: 0.9em;
opacity: 0.7;
}
.tooltip[open] > *:not(summary) {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 0.85em;
white-space: nowrap;
z-index: 1000;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
width: max-content;
}
-
top: 100%让提示框紧贴 summary 下方；若需右对齐或居中，改left或加transform: translateX(-50%) - 必须加
z-index，否则可能被其他元素遮盖 - 避免用
min-width，改用width: max-content更适应内容长度
移动端和键盘用户的兼容处理
纯靠 click 触发在手机上体验差：tap 区域小、容易误触、没有 hover 效果。而且屏幕阅读器默认不把 <summary></summary> 当按钮读，得补语义。
- 给
<summary></summary>加role="button" aria-label="显示说明"，让读屏软件识别意图 - 用
@media (hover: hover)区分设备，PC 上支持:hover自动展开（但慎用，容易干扰用户） - 移动端建议保留点击展开，同时加
ontouchstart="this.open = !this.open"防止 click 延迟 - 按
Esc关闭提示框需 JS 监听：document.addEventListener('keydown', e => e.key === 'Escape' && document.querySelector('.tooltip[open]')?.removeAttribute('open'))
比details更轻量的替代方案要考虑什么
如果只是简单展示静态文本，<details></details> 过重：它天生支持状态持久化（浏览器会记住 open 状态）、有默认箭头、还带语义化开合含义。真做提示框，反而不如 aria-describedby + role="tooltip" 灵活。
- 动态内容、需要延迟显示/隐藏、要跟随鼠标移动？
<details></details>做不到，得用Popover API（<div popover>）或第三方库 <li>SEO 或无障碍要求高？<code><details></details>内容始终在 DOM 中，而aria-hidden="true"的 tooltip 可能被忽略 - 多语言或主题切换频繁？
<details></details>的open属性是布尔值，没法绑定 i18n 数据，JS 控制更可控
细节在于：它不是“不能用”，而是“用对场景”。把 <details></details> 当提示框，本质是借它的交互状态管理能力，代价是放弃原生 tooltip 的轻量和语义精度。
