How to add tooltip for a particular column data in angular-datatables

How to add tooltip for a particular column data in angular-datatables

ashrithaashritha Posts: 1Questions: 1Answers: 0

Hi, I recently started development with datatables using angularjs and nowI am struct with this issue. I am using ellipse to hide longer text in a one of tables column and I wanted to display full column text using tooltip.

This is my code for datatable looks like this

var vm = this,
dtInstance;

vm.dtInstance = dtInstance;

// display data in datatable along with extensions
 function initTable() {
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function () {
    return baseService.getTableData();
   //   return baseService.getSRList();
})
        .withOption('deferRender', true)
        .withScroller()
        .withOption('scrollX',  '100%')
        .withOption('scrollY', 470)
       .withOption('paging', false)

// .withOption('autoWidth', false)
.withOption('responsive', true);
vm.dtIntanceCallback = function (instance) {
vm.dtInstance = instance;
};
vm.tableHeaders = tableHeadersService.getTableHeaders();

vm.dtColumns = [];

;

angular.forEach(vm.tableHeaders, function (value, key) {
    vm.dtColumns.push(DTColumnBuilder.newColumn(value.title).withTitle(value.value));
});

vm.DTColumnDefs = [

    DTColumnDefBuilder.newColumnDef(2).renderWith(function (data, type, flow) {
        if (!(data === null))
            return type === 'display' && (data.length > 25 ? data.substr(0, 25) + '...' : data);
    })

];


 }
   vm.displayTable = true;

initTable();

I was wondering if there was anyway so I could display tooltip for index 2 column.

Any help/advice is greatly appreciated.
Willing to post any more information if it will help.

This discussion has been closed.