jquery - trunacte cells in datatables but also preview full text in tooltip -

how can truncate comments cells (one column), , in same time, insert tooltip show full text of truncated text?

i've tried truncate text, , in tooltip shown truncated text..

<table id="example" class="table table-bordered" cellspacing="0" width="100%">     <thead>     <tr>         <th>             @html.displaynamefor(model => model.shortdate)         </th>         <th>             @html.displaynamefor(model => model.clientname)         </th>         <th>             @html.displayname("type")         </th>         <th>             @html.displaynamefor(model => model.projectvaluehr)         </th>         <th>             @html.displaynamefor(model => model.projectvaluemoney)         </th>         <th>             @html.displaynamefor(model => model.commentpipeline)         </th>         <th>             @html.displayname("owner")         </th>          <th>             @html.displaynamefor(model => model.jobstatusname)         </th>         <th>             @html.displayname("modified by")         </th>         <th>             @html.displaynamefor(model => model.modifiedtimestamp)         </th>         <th>             @html.displayname("created by")         </th>         <th>             @html.displaynamefor(model => model.lostcomment)         </th>         <th>             options         </th>     </tr>    <tbody>     @foreach (var item in model)     {         <tr>             <td>                 @html.displayfor(modelitem => item.shortdate)             </td>             <td>                 @html.displayfor(modelitem => item.clientname)             </td>             <td>                 @html.displayfor(modelitem => item.namefco)             </td>              <td>                 @html.displayfor(modelitem => item.projectvaluehr)             </td>             <td>                 @html.displayfor(modelitem => item.projectvaluemoney)             </td>             <td>                 @html.displayfor(modelitem => item.commentpipeline)             </td>             <td>                 @html.displayfor(modelitem => item.fullname)             </td>             <td>                 @html.displayfor(modelitem => item.jobstatusname)             </td>              <td>                 @html.displayfor(modelitem => item.fullname)             </td>             <td>                 @html.displayfor(modelitem => item.modifiedtimestamp)             </td>             <td>                 @html.displayfor(modelitem => item.shortdate)             </td>             <td>                 @html.displayfor(modelitem => item.lostcomment)             </td>             <td style="display: inline">                 <button type="button" class="editview" data-id="@item.pipelineid" data-toggle="modal" data-target="#modaledit">edit</button>                 <button type="button" class="btndetails" data-toggle="modal" data-id="@item.pipelineid" data-target="#detailsmodal">more</button>             </td>         </tr>     } </tbody> </table> <script>     function strtrunc(str, max, add) {     add = add || '...';     return (typeof str === 'string' && str.length > max ? str.substring(0, max) + add : str); };    $(document).ready(function () {     'use strict';     t = $('#example').datatable({         "bprocessing": true,         "bstatesave": true,         "idisplaylength": 10000,         dom: 'bfrtip',         'columndefs': [           {               'targets': 5,               'render': function(data, type, full, meta){                   if(type === 'display'){                       data = strtrunc(data, 20);                   }                    return data;               }           }         ],         "fncreatedrow": function (nrow, adata, idataindex) {             $(nrow).children("td").css("overflow", "hidden");             $(nrow).children("td").css("white-space", "nowrap");             $(nrow).children("td").css("text-overflow", "ellipsis");         },         buttons: [             'copy', 'csv', 'excel', 'pdf', 'print', 'colvis', {                 text: 'create',                 action: function (e, dt, node, config) {                     alert('button activated');                     $('#createviewmodal').modal('show');                 }             }         ]     }); </script> 

you can truncate text css, use js populate title attribute on mouseenter:

<style type="text/css"> td.myrow {     max-width: 100px;     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; } </style>      <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-zosebrlbnqzlpnkikedrpv7loy9c27hhq+xp8a4mxaq=" crossorigin="anonymous"></script> <script>     $(function() {         $("td.myrow").mouseenter(function() {             $(this).attr("title", $(this).html());         });     }); </script>  <table border="1" width="300"> <tr> <td class="myrow">some long text goes here...</td> <td class="myrow">some long text goes here...</td> <td class="myrow">some long text goes here...</td> </tr> </table>