如何使用jQuery在document.ready中为表格内多个文本框设置相同tooltip

核心逻辑 #

• 以现有表格#tblPercent的作用域为边界做元素选择，避免误改页面其他位置的同类型元素
• 把公共提示文本抽成独立常量，所有目标文本框的title统一从常量赋值，后续调整提示内容只需要修改一处
• 所有初始化逻辑全部放在jQuery document.ready 回调内执行，确保DOM渲染完成后再做属性赋值，不会出现选择不到元素的问题
• 注：ASP.NET服务器控件TextBox渲染到客户端后就是原生input元素，通过CssClass指定的类可以直接被jQuery选择到，不存在兼容问题

基础实现代码 #

// 页面DOM渲染完成后自动执行
$(document).ready(function() {
  // 统一定义公共提示文本，可根据业务需求直接修改内容
  const COMMON_INPUT_TIP = '请输入0-100之间的百分比数值，输入时系统会自动计算对应占比结果';
  
  // 精准定位表格内所有带TxtBox12类的文本输入框，统一设置title属性
  $('#tblPercent').find('input.TxtBox12').attr('title', COMMON_INPUT_TIP);
});

适配动态场景的优化写法 #

如果后续表格是通过异步加载动态生成新行的，可以把赋值逻辑抽成独立公共方法，新增行渲染完成后直接调用方法就行，不用重复写选择逻辑：

$(document).ready(function() {
  const COMMON_INPUT_TIP = '请输入0-100之间的百分比数值，输入时系统会自动计算对应占比结果';
  // 抽成全局公共方法，供动态渲染流程调用
  window.syncTableInputTip = function() {
    $('#tblPercent').find('input.TxtBox12').attr('title', COMMON_INPUT_TIP);
  }
  // 页面初次加载时执行一次初始化
  syncTableInputTip();
});

灵活调整规则 #

如果部分文本框需要保留原来的专属提示，不需要被统一规则覆盖，只需要给这类元素加一个标记类，在选择器里加排除逻辑就行：

示例：跳过带keep-origin-title类的元素，不覆盖它原有的title

$('#tblPercent').find('input.TxtBox12:not(.keep-origin-title)').attr('title', COMMON_INPUT_TIP);

效果说明 #

通过该方式设置的title为浏览器原生tooltip提示，无需引入额外的第三方组件，鼠标悬浮在文本框上时就会自动弹出设置的提示文本，和单个标签硬编码title的显示效果完全一致。

内容的提问来源于stack exchange，提问作者Rashed Hossen