データ型内のtrunacteセルだけでなく、ツールチップのプレビューテキスト

Question

コメントセル（1列）を切り捨てると同時に、その切り詰めテキストのフルテキストを表示するツールチップを挿入する方法はありますか？

私はあなたがMouseEnterイベントにtitle属性を取り込むためにJSを使用し、その後、CSSを使用してテキストを切り捨てることができます。..

<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> 

Answer 1

テキストを切り捨てることだけ試してみた、と私のツールチップに切り捨てられたテキストを示します。

<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>