jQuery Ajax请求中修改Bootstrap Tooltip标题不生效问题求解

AI 小北

2026-10-5

根因分析

this指向错误：$.get()的普通回调函数内部的this默认指向全局window对象，不是触发mouseover事件的.t1元素，因此回调内的$(this)无法选中目标元素，属性修改自然不生效。而事件回调外层的this确实指向目标元素，所以外层的属性修改可以正常运行。
Bootstrap Tooltip内容缓存：已经初始化过的Tooltip会缓存标题内容，即使修改了data-original-title属性，也不会自动读取新值，需要手动刷新Tooltip实例。

修复方案

完整可运行代码

$(document).ready(() => {
  // 提前初始化Tooltip，设置为手动触发避免逻辑冲突
  $('.t1').tooltip({
    trigger: 'manual'
  })

  $('.t1').on('mouseover', function() {
    const $target = $(this)
    // 已加载过内容直接显示，避免重复发起请求
    if ($target.data('content-loaded')) {
      $target.tooltip('show')
      return
    }

    $.get("MyURL/playground/t1/" + $target.attr('number'), function(data) {
      // 使用外层提前保存的目标元素引用修改属性
      $target.attr('data-original-title', data)
      // 标记内容已加载
      $target.data('content-loaded', true)
      // 刷新Tooltip实例并显示最新内容
      $target.tooltip('dispose').tooltip().tooltip('show')
    })
  })

  // 鼠标移出时隐藏Tooltip
  $('.t1').on('mouseout', function() {
    $(this).tooltip('hide')
  })
})

可选的this指向修复方案

你也可以把$.get()的回调改为箭头函数，利用箭头函数继承外层作用域this的特性，不需要额外保存元素引用：

$.get("MyURL/playground/t1/" + $(this).attr('number'), (data) => {
  $(this).attr('data-original-title', data)
    .data('content-loaded', true)
    .tooltip('dispose').tooltip().tooltip('show')
})