Jquery - Adding data-toggle property to a table cell does not work

Question

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