jQuery Tooltip的content配置项无法覆盖原有提示文本该如何解决

问题原因 #

你遇到的配置不生效问题核心是Tooltip库的API混淆，同时存在初始化时机的潜在问题：

1. 你HTML代码中添加的data-toggle="tooltip"是Bootstrap Tooltip的专属触发标识，而你在JS中传入的content配置项是jQuery UI Tooltip的专属参数，Bootstrap Tooltip并不识别该参数。
2. 如果你的初始化代码没有放在DOM加载完成的回调中，会导致目标元素还未渲染完成，配置无法绑定生效。

对应解决方案 #

方案1：使用Bootstrap Tooltip（保留data-toggle="tooltip"属性）

Bootstrap Tooltip替换内容使用title配置项，修改你的JS代码即可：

// 要放在DOM就绪回调内确保元素已加载
$(function() {
  $('#linkB').tooltip({
    title: 'LinkB Tooltip replaced via text in the title option of tooltip'
  });
})

如果是已经初始化过Tooltip，需要修改内容可以调用更新方法：

// Bootstrap 4/5 通用更新内容写法
$('#linkB').attr('title', '新的提示内容').tooltip('dispose').tooltip();

方案2：使用jQuery UI Tooltip（需要移除Bootstrap相关标识）

如果你确定要使用content配置项，先删除HTML中的data-toggle="tooltip"属性，同时确保你已经正确引入jQuery UI库，JS代码如下：

$(function() {
  $('#linkB').tooltip({
    content: 'LinkB Tooltip replaced via text in the content option of tooltip'
  });
})

其他检查点 #

• 确保依赖库引入顺序正确：先引入jQuery，再引入对应Tooltip的依赖库（使用Bootstrap Tooltip需要额外引入Popper.js）
• 不要同时引入Bootstrap Tooltip和jQuery UI Tooltip，两个库的API命名冲突会导致配置异常

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