如何为bootgrid中的JavaScript按钮添加Tooltip或鼠标悬停提示？

嘿，这事儿挺简单的，给你两种靠谱的实现方式，按需选就行：

方法1：原生HTML title 属性（零依赖快速实现） #

直接在生成按钮的代码里给<button>标签加个title属性，鼠标悬停时浏览器会自动显示提示，完全不需要额外的JS或样式：

{ 
  return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\" title=\"点击编辑该行数据\">" +
         "<span class=\"glyphicon glyphicon-edit\"></span>" +
         "</button>"; 
}

这种方式的优势是简单粗暴、原生支持，但提示样式是浏览器默认的，没法自定义外观。

方法2：Bootstrap Tooltip（美观可定制，适配你的按钮风格） #

既然你用了Bootstrap的按钮样式，那直接用Bootstrap自带的Tooltip组件更协调，样式统一还能自定义位置和外观。需要两步操作：

第一步：修改按钮生成代码，添加Tooltip属性 #

给按钮加上data-toggle="tooltip"触发属性，再配合title设置提示文本，还可以用data-placement控制提示出现的位置（可选值：top/right/bottom/left）：

{ 
  return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"编辑该行\">" +
         "<span class=\"glyphicon glyphicon-edit\"></span>" +
         "</button>"; 
}

第二步：初始化Tooltip组件 #

Bootstrap的Tooltip不会自动识别动态生成的元素（比如bootgrid加载后才出现的按钮），所以要在合适的时机初始化：

• 如果是页面首次加载后初始化，写在$(document).ready()里：

$(document).ready(function(){
  // 初始化所有带tooltip触发属性的元素
  $('[data-toggle="tooltip"]').tooltip();
});

• 如果是bootgrid动态加载的表格，建议在bootgrid的loaded事件里重新初始化，确保新生成的按钮都能绑定Tooltip：

$("#你的表格ID").bootgrid({
  // 你的bootgrid配置项...
}).on("loaded.rs.jquery.bootgrid", function(){
  // 表格加载完成后初始化Tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

这样就能得到和Bootstrap风格统一的美观提示，还能通过Bootstrap的API自定义样式和行为~

内容的提问来源于stack exchange，提问作者Pocket Knight