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

Question

我有一个用数据库中的数据填充的表，我想添加 Bootstrap 工具提示，这样当有人将鼠标悬停在表中的一行上时，他的详细信息就会显示。在该工具提示中我想添加图像，我可以在工具内执行此操作吗？这是我动态生成的表。

$(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();
    },        
});

}

but tooltip dont work when i hover over the records?

        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");
        },        
    });
}