Bootstrap 4+jQuery Ajax返回值Tooltip首次hover显示问题求助

项目仅允许使用Bootstrap 4与jQuery，实现Tooltip加载Ajax内容时遇到以下问题：
最初Tooltip无响应，查阅资料后添加selector参数，但两种尝试方案均存在问题：

基础HTML结构 #

<span class="show-details" data-url="https://example.com/controller">Example</span>

方案1：直接在title函数中异步请求 #

$('body').tooltip({
    selector: '.show-details',
    container: 'body',
    html: true,   
    title: function() {
        let url = $(this).data('url');
        $.ajax(url, {
            success: function(response) {
                console.log(response); // 能输出正确内容
                return response; // 但Tooltip显示为空
            }
        });
    }
});

问题：console.log能拿到正确返回值，但return response无法把内容传给Tooltip，Tooltip显示为空。原因是Ajax是异步操作，title函数在Ajax请求完成前就已经执行完毕返回，此时返回值为undefined，导致Tooltip为空。

方案2：用全局变量存储返回值 #

var toolTip = '';

$('body').tooltip({
    selector: '.show-details',
    container: 'body',
    html: true,
    title: function() {
        let url = $(this).data('url');
        $.ajax(url, {
            success: function(response) {
                console.log(response); // 能输出正确内容
                toolTip = response;
            }
        });
        return toolTip; // 第一次hover为空，第二次才显示正确内容
    }
});

问题：首次hover时，Ajax请求还未完成，toolTip仍是初始空字符串，所以Tooltip为空；第二次hover时，上一次的Ajax请求已完成，toolTip被赋值为正确内容，因此能正常显示。

正确解决方案：利用Tooltip事件手动更新内容 #

核心思路：先让Tooltip显示临时提示，再在Tooltip触发显示的事件中发起Ajax请求，请求完成后手动更新Tooltip内容。

// 初始化Tooltip，设置临时标题
$('body').tooltip({
    selector: '.show-details',
    container: 'body',
    html: true,
    title: '加载中...',
    trigger: 'hover'
});

// 监听Tooltip的show事件
$('body').on('show.bs.tooltip', '.show-details', function(e) {
    var $this = $(this);
    var tooltip = $this.data('bs.tooltip');
    var url = $this.data('url');

    // 发起Ajax请求
    $.ajax({
        url: url,
        success: function(response) {
            // 更新Tooltip的title内容
            tooltip.options.title = response;
            // 重新渲染Tooltip
            tooltip.show();
        },
        error: function() {
            tooltip.options.title = '加载失败';
            tooltip.show();
        }
    });
});

// 可选：监听hide事件重置title，确保每次hover都重新请求
$('body').on('hide.bs.tooltip', '.show-details', function(e) {
    var tooltip = $(this).data('bs.tooltip');
    tooltip.options.title = '加载中...';
});

原理说明：

1. 初始化Tooltip时设置临时title，保证首次hover能显示内容。
2. 监听show.bs.tooltip事件，在Tooltip即将显示时发起Ajax请求。
3. 请求成功后，直接修改Tooltip实例的options.title为返回内容，再调用show()重新渲染，实现首次hover即可显示正确内容。
4. 可选的hide.bs.tooltip监听，用于重置title，避免下次hover直接显示旧内容。

备选方案：预加载内容（适合内容稳定场景） #

页面加载完成后提前请求所有Tooltip内容，存储在元素的data属性中，hover时直接读取本地数据：

$(document).ready(function() {
    // 预加载所有Tooltip内容
    $('.show-details').each(function() {
        var $this = $(this);
        var url = $this.data('url');
        $.ajax({
            url: url,
            success: function(response) {
                $this.data('tooltip-content', response);
            }
        });
    });

    // 初始化Tooltip，读取预加载内容
    $('body').tooltip({
        selector: '.show-details',
        container: 'body',
        html: true,
        title: function() {
            return $(this).data('tooltip-content') || '加载中...';
        }
    });
});

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