truncate text and in the same time show in a tooltip full text

cvelle89

How can I truncate my comments cells (one column), and in the same time, to insert a tooltip which show full text of that truncated text?

I've tried only to truncate text, and in my tooltip is 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>

scholarlylabs

I'm doing this with the Ellipsis plugin. The plugin and the underlying approach to truncate fields using data rendering is explained here: https://datatables.net/blog/2016-02-26