title属性无法自定义样式，因其渲染由浏览器硬编码决定；正确方案是用aria-describedby配合自定义DOM或data-tooltip伪元素实现可控提示框。
title属性根本不能自定义样式
浏览器对 title 属性的渲染是硬编码的：系统级弹窗、固定延迟（约 500–1000ms）、无 CSS 接口、不响应 :hover 或任何伪类。你写再多 style="color:red" 或 tooltip { font-size: 12px; } 都不会生效。
常见误操作包括：
- 给元素加
title同时又写tooltip类，以为能用 CSS 控制它 - 用 JavaScript 动态改
element.title，期待样式同步变化 - 在移动端测试
title，发现完全不触发，误以为是样式没加载好
想换样式？必须放弃title，改用aria-describedby + 自定义DOM
真正可控的方案是绕过 title，用语义化 ARIA + 真实 DOM 渲染提示框。核心链路是：
- HTML 中用
aria-describedby指向一个<div role="tooltip"> - 该
<div>用 CSS 定位（position: absolute）、设z-index、加transition - JS 监听
mouseenter/focus显示，mouseleave/blur隐藏 - 内容可含 HTML、换行、图标，支持键盘焦点和屏幕阅读器
示例结构：
立即学习“前端免费学习笔记（深入）”；
<button aria-describedby="tip-1">操作</button> <div id="tip-1" role="tooltip" class="custom-tooltip">支持 <strong>加粗</strong> 和换行<br>还能定位</div>
data-tooltip + CSS伪元素是最轻量的替代方案
如果不想写 JS，且只做 PC 端简单提示，可用 data-tooltip + ::before/::after：
- HTML：
<span data-tooltip="这是提示文字">悬停我</span> - CSS：
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; ... } - 缺点明显：无法换行（
content不解析\n）、无延迟控制、不支持键盘用户、被overflow: hidden裁剪时消失 - 适合内部管理后台等对无障碍要求低、纯鼠标操作的场景
移动端和触控设备上title基本失效
这不是 bug，是设计使然：iOS Safari、Android Chrome、Windows 触控模式下，title 不响应长按或 hover。Surface 笔记本这类混合设备也常掉坑里。
真要跨端一致，必须用 JS 绑定 touchstart/touchend 或统一走 click 触发逻辑——但这就彻底脱离 title 原生路径了。
容易被忽略的是：即使你在 PC 端调好了自定义 tooltip，也要检查它在触控屏上的焦点管理、触摸反馈、以及是否遮挡可点击区域。
