本文介绍如何使用 jQuery 为具有相同语义的多个 <td> 单元格统一绑定 tooltip 行为，解决因重复使用 id 导致仅首行生效的问题，并提供可复用、符合 HTML 规范的 class-based 实现方案。
本文介绍如何使用 jquery 为具有相同语义的多个 `
在 Web 开发中，当表格列内容过长而显示区域受限时，常需通过悬停提示（tooltip）展示完整文本。但若错误地为多个 <td> 元素重复设置相同 id="tooltipexcess"，会导致 jQuery 选择器 $("#tooltipexcess") 仅匹配第一个元素（HTML 规范要求 id 全局唯一），从而造成 tooltip 仅对首行生效。
正确的做法是改用 class 作为选择器依据，既符合语义化标准，又能天然支持多元素批量绑定。以下是优化后的完整实现：
<table class="table table-borderless table-sm table-limit-excess rounded mt-2">
<tbody>
<tr class="bg-primary text-white">
<th class="pl-2">Key</th>
<th class="pr-2">Data</th>
<th class="pr-2">Condition</th>
</tr>
<tr>
<td>12</td>
<td class="tooltipexcess" title="123456789012345, A123456789012345">123456789012345, A123456789012345</td>
<td>Equal To</td>
</tr>
<tr>
<td>92</td>
<td class="tooltipexcess">322312323</td>
<td>Contains</td>
</tr>
<tr>
<td>230</td>
<td class="tooltipexcess">123233, 333, 3312213, 2132321, 3fsdff</td>
<td>Equal To</td>
</tr>
</tbody>
</table>
<script>
// 使用 class 选择器，一次性绑定所有目标单元格
$(".tooltipexcess").on("mouseover", function () {
const $this = $(this);
// 若未预设 title 属性，则动态设置；避免重复覆盖
if (!$this.attr("title")) {
$this.attr("title", $this.text().trim());
}
});
</script>✅ 关键改进点说明：
- 语义合规：用 class="tooltipexcess" 替代非法重复的 id，确保 HTML 结构有效；
- 高效绑定：$(".tooltipexcess") 自动匹配所有匹配元素，无需循环或复杂定位逻辑；
- 健壮性增强：添加 title 属性存在性判断，防止多次 hover 导致冗余赋值；
- 兼容动态内容：若表格后续通过 JS 动态追加行，建议改用事件委托（见下方进阶写法）。
⚠️ 注意事项：
- 原生 title 属性 tooltip 样式简陋、延迟固定、无法自定义样式。如需更美观/可控的提示（如带 HTML 内容、动画、位置微调），推荐集成 Bootstrap Tooltip 或 Tippy.js；
- 对于动态生成的表格行（如 AJAX 加载后插入），应改用事件委托写法，确保新节点自动生效：
$("tbody").on("mouseover", ".tooltipexcess", function() { const $this = $(this); if (!$this.attr("title")) { $this.attr("title", $this.text().trim()); } });
该方案简洁、可靠、易于维护，是处理多行表格单元格 tooltip 的推荐实践。
