本文介绍如何使用 jQuery 为具有相同类名的多个 单元格统一绑定鼠标悬停事件，动态设置 title 属性以实现响应式 Tooltip 效果，解决 ID 重复导致仅首行生效的问题。

本文介绍如何使用 jquery 为具有相同类名的多个 `

` 单元格统一绑定鼠标悬停事件，动态设置 `title` 属性以实现响应式 tooltip 效果，解决 id 重复导致仅首行生效的问题。

在 HTML 中，id 属性必须唯一——一旦多个

共享同一 id="tooltipexcess"，jQuery 的 $("#tooltipexcess") 选择器将仅匹配第一个元素，因此原代码只能为第一行生效，后续行完全被忽略。这是问题的根本原因。

✅ 正确做法是：改用 class 替代 id，并配合类选择器 .tooltipexcess 绑定事件。这样可确保所有目标单元格都被选中和处理：

百度AI助手

百度AI助手是一款AI智能体工具，百度推出的多场景AI智能体助手。

下载

Key	Data	Condition
12	123456789012345, A123456789012345	Equal To
92	322312323	Contains
230	123233, 333, 3312213, 2132321, 3fsdff	Equal To

<script> // 为所有 .tooltipexcess 单元格绑定 mouseover 事件 $(".tooltipexcess").on("mouseover", function () { $(this).attr("title", $(this).text().trim()); }); </script>

? 关键优化说明：

• 使用 class="tooltipexcess" 实现多元素批量选择；
• .text().trim() 避免前后空格干扰 tooltip 显示；
• 事件委托非必需（因表格静态或初始加载后生成），但若表格内容动态追加（如 AJAX 加载），建议升级为委托写法：

// 更健壮的写法：支持未来动态插入的 .tooltipexcess 单元格
$("tbody").on("mouseover", ".tooltipexcess", function () {
  $(this).attr("title", $(this).text().trim());
});

⚠️ 注意事项：

• 原生 title 属性触发的 tooltip 样式简陋、延迟明显、不支持 HTML 内容。如需美化（如圆角、阴影、自定义宽度/颜色），推荐集成 Tippy.js 或 Bootstrap Tooltip；
• 若单元格内含换行符或富文本，text() 会自动提取纯文本，符合 tooltip 场景需求；若需保留格式，应改用 html() 并做安全转义；
• 确保 jQuery 已正确加载（建议置于