Unable to add data-toggle property during rowCallback

alelau

I want to only show part of the long text and user hover on a cell to show full text using bootstrap tooltip. But my code does not work

Using element inspector confirmed that data-toggle was not added to the cell where the text is longer than 100 character. Adding "title" property and text trimming both worked.

Any help is appropriated.

Thanks,

var myTab = targetTable.DataTable( {
        dom: 'Bfrtip',
        ajax:           'GetDataServlet?ObjectType=' + type,
        scrollY:        850,
        scrollX:        true,
        scrollCollapse: true,
        buttons: [
            'csvHtml5'
        ],
        rowCallback: function(row, data, index) {
          if(data[5].length > 100)  {
             var desc = $(row).find('td:eq(5)');
             desc.prop("title", data[0].substring(data[0].length -13, data[0].length-4) + ":\r\n" + data[5]);
             desc.prop("data-toggle", "tooltip");
             desc.html( data[5].substring(0, 96) + " ...");

              }
        },
        paging:         false
    } );

kthorngren

Per this SO Thread I tried using attr() like this desc.attr("data-toggle", "tooltip");:
https://stackoverflow.com/questions/24502193/cannot-add-data-toggle-with-prop

And it works:
http://live.datatables.net/karetiyi/2/edit

Changed the column and length check for the test case.

Kevin

alelau

Thanks Kevin, so .attr() is not the same as .prop() I need to go back and do some jquery reading