如何将bootstrap工具提示应用于动态生成的表

Question

我的表被数据库中的数据填充，我想添加Bootstrap Tooltip此提示，因此当某人悬停在表中的行时，他的详细信息将会显示出来。在该工具提示中，我想添加一个图像，我可以在工具中执行此操作吗？这是我动态生成的表。

$(document).ready(function () {
    $('#DisplayTable').tooltip({
        'show': true,
        'placement': 'bottom',
        'title': "Please remember to..."
    });
});
function Table(x) {
    var statusCol = "";
    var table = '<table><tr><th>First Name</th><th>Surname</th><th>Surname</th></tr>';
    var ID = 0;
    for (var student in x) {
        var row = '<tr class='staff-row'id='' + x[id].ID + ''</tr>';
        var row = '<tr class='staff-data'id='' + x[id].Age + ''</tr>';
        row += '<td>' + x[student].fNanme + '</td>';
        row += '<td>' + x[student].sName + '</td>'
        row += '<td>' + x[student].username + '</td>'
        ID++;
        table += row;
    }
    table += '</table>';
    $('#DisplayTable').html(table);
    $('#DisplayTable').tooltip({
    'show': true,
    'selector':'.staff-row, .staff-data',
    'placement': 'bottom',
    'title': function(event){
        var tds=$(this).find('td');            
        var tds=$(this).find(x[id].Age);            
        return $(tds[0]).text()+" "+$(tds[1]).text()+$(tds[3]).text();
    },        
});
}

但是，当我悬停在记录上时，工具提示不起作用？

        function Method(a,b,c) {
        $.ajax({
            type: "POST",
            url: "Services/method.asmx/SomeMethod",
            data: JSON.stringify({ a: a, b: b, c: c }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
            }
        });
    }

Answer 1

只是尝试设置：

$('#DisplayTable').tooltip({
        'show': true,
        'placement': 'bottom',
        'title': "Please remember to..."
    });

而不是$('#DisplayTable').tooltip('show');

jsfiddle示例：

<div id="DisplayTable"><span>Some template text</span></div>
<input type="button" id="clickMe" value="clickMe"/>
    $(document).ready(function () {
    $('#clickMe').click(function(){
        Table(1);
    });
});
function Table(x) {
    var statusCol = "";
    var table = '<table><tr><th>First Name</th><th>Surname</th><th>Surname</th></tr>';
    var ID = 0;
    for (var i=0;i<10;i++) {
        var row = "<tr age='"+(12+i)+"' class='staff-row' id='" +"ColId"+i + "'>";
        row += '<td>' + "FName" + '</td>';
        row += '<td>' + "SName" + '</td>'
        row+="</tr>"
        ID++;
        table += row;
    }
    table += '</table>';
    $('#DisplayTable').html(table);
    $('#DisplayTable').tooltip({
        'show': true,
        'selector':'.staff-row',
        'placement': 'bottom',
        'title': function(event){
            var $this=$(this);
            var tds=$this.find('td');            
            return $(tds[0]).text()+" "+$(tds[1]).text()+" age: "+$this.attr("age");
        },        
    });
}