jQuery动态创建元素上Tooltip无法正常显示的问题排查

核心问题分析 #

你的代码存在两个关键错误导致Tooltip失效：

1. 字符串拼接语法错误 #

生成data-title属性时，未正确拼接变量json[i].pregunta，导致属性值被解析成字符串'json[i].pregunta'而非实际的问题文本，Tooltip无法获取有效提示内容。

错误代码片段：

html += '<tr>'+
'<td width=50%>'+
'<a href="#" class="pregunta"  data-toggle="tooltip" data-title="'json[i].pregunta'" >'+pregunta+'</a></td>'+
'</tr>';

2. Tooltip初始化时机错误 #

你在for循环内调用$('.pregunta').tooltip();，但此时生成的HTML仅存于html变量中，尚未插入DOM树，jQuery无法找到目标元素，无法完成Tooltip事件绑定。

修复后的代码 #

$.ajax({
    url: 'get_form.php',
    type: 'post',
    data: {idFormulario: idFormulario},
    success :  function(response)
    {      
        console.log(response);
        var json = $.parseJSON(response);
        var num = json.length;
            
        html += '<table class="table" cellpadding="2">';
        
        for(var i=0;i<num;i++){
            
            var index = i+1;
            var pregunta = json[i].pregunta;

            // 修复字符串拼接，正确插入变量值
            html += '<tr>'+
            '<td width=50%>'+
            '<a href="#" class="pregunta" data-toggle="tooltip" data-title="' + json[i].pregunta + '" >'+pregunta+'</a></td>'+
            '</tr>';
            
        }
        
        html += '</table>';
        // 先将HTML插入summernote，再初始化Tooltip
        $('.summernote').summernote('code', html);
        // 针对summernote内的目标元素初始化Tooltip
        $('.summernote .pregunta').tooltip(); 
    }
});

额外注意事项 #

• 若summernote设置内容后存在延迟渲染，可使用其afterSetContent回调确保元素完全加载后再初始化Tooltip：

$('.summernote').summernote({
    callbacks: {
        afterSetContent: function() {
            $('.summernote .pregunta').tooltip();
        }
    }
});

• 确认页面已正确引入Bootstrap Tooltip组件（含CSS与JS），若使用jQuery UI Tooltip，需确保相关资源加载完成。

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