Can we add custom title attribute to td of each row with its text and we can also add ellipses to td

gtbhopale

I have tried below code:

                  $('#fixed-table').DataTable({
                    data: responseDetails,
                    searching: false,
                    ordering: false,
                    lengthChange: false,
                    'createdRow': function (row, data, rowIndex) {
                      // Per-cell function to do whatever needed with cells
                      $.each($('td', row), function (colIndex) {
                          // For example, adding data-* attributes to the cell
                          $(this).attr('title', $(this).text());
                      });
                    },
                    columns: [
                      { data: 'userName' },
                      { data: 'complatedDate' },
                      { data: 'businessUnitList' },
                      { data: 'countryGeograpyList' },
                      { data: 'prismRole' },
                      { data: 'bandLevel' },
                      { data: 'video1' },
                      { data: 'video2' },
                      { data: 'video3' },
                      { data: 'overAll' },
                      { data: 'response1' },
                      { data: 'response2' },
                      { data: 'response3' }
                  ],
                  columnDefs: [ {
                      targets: 10,
                        render: function ( data, type, row ) {
                          return type === 'display' && data.length > 10 ?
                          data.substr( 0, 15) + '…' :
                          data;
                        }
                    },{
                      targets: 11,
                      render: function ( data, type, row ) {
                        return type === 'display' && data.length > 10 ?
                        data.substr( 0, 15) + '…' :
                        data;
                      }
                    },
                    {
                      targets: 12,
                      render: function ( data, type, row ) {
                        return type === 'display' && data.length > 10 ?
                        data.substr( 0, 15) + '…' :
                        data;
                      }
                    } ]

                  });

But the text of each td is truncating/ellipsing first and then title attribute is get added which show the trucated text in tooltip not the whole text.

help will be appreciated.

colin

The second parameter to createdRow is the raw data for the row - you can use that instead of $(this).text(),

Colin

gtbhopale

Thanks, Colin for your reply. My major concern is the default title tooltip getting text which having ellipse. I don't want ellipses in default title tooltip on hover of td. I wanted a full text in tooltip without ellipses.

You can find the issue in the below screenshot.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

gtbhopale

Hi Colin, you can find the below jsFiddle link where I have tried to reproduce the issue
https://jsfiddle.net/z5khcn01/2/
In this fiddle, you will find the th12 column having a large amount of data, which has ellipses. And when you hover the mouse on it , it is showing only the ellipses text, not the all full data.
Let me know if more information is needed.
Thanks.

kthorngren

As Colin said use the second parameter, data, of the createdRow function to build your title. For example:
https://jsfiddle.net/93w5d6ye/

Kevin

gtbhopale

Thanks Guys.It is working fine.