CODEWITHSUNDEEP
javascriptjqueryasp.nettwitter-bootstrap
user3195896
user3195896

Reputation:

how to apply bootstrap tooltip to a dynamic generated table

I have table that get populated with data from the database, i would like to add bootstrap tooltip this this, so when someone hoverover a row in a table his detail will get display. within that tool tip i would like to add a image, can i do that inside the toolt? This is my dynamic generated table.

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

Upvotes: 0

Views: 3714

Answers (1)

Nicolai
Nicolai

Reputation: 1953

just try to set:

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

instead of $('#DisplayTable').tooltip('show');

jsfiddle example:

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

Upvotes: 1

Related Questions