JSFiddle - React, Tailwind, and code Playground
HTML
<table class="tableGrid bodyTable">
<colgroup>
<col style="width: 20px;" />
<col style="width: 25%; display: none;" />
<col style="width: 70px;" />
<col style="width: 60px;" />
<col style="width: 120px;" />
<col style="width: 120px;" />
<col style="width: 25%;" />
<col style="width: 25%;" />
<col style="width: 25%;" />
</colgroup>
<tbody>
<tr class="alternato">
<td>
<input type="checkbox" />
</td>
<td style="display: none;">3046</td>
<td>C-2014-12</td>
<td></td>
<td></td>
<td></td>
<td>testtesttesttesttesttesttestt</td>
<td>test</td>
<td>testtesttesttesttesttesttesttest</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td style="display: none;">3059</td>
<td>I-2014-11</td>
<td></td>
<td></td>
<td></td>
<td>sss</td>
<td></td>
<td>test</td>
</tr>
</tbody>
</table>
<h1>Resize the window for try the tooltip on cell with text truncated</h1>
CSS
.tableGrid {
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
height: auto;
width: 100%;
font-size: 11px;
font-family:'Lucida Sans';
}
.tableGrid td, .tableGrid th {
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
border: 1px solid gainsboro;
}
JavaScript
$.expr[':'].truncated = function (obj) {
var element = $(obj);
return (element[0].scrollHeight > (element.innerHeight() + 1)) || (element[0].scrollWidth > (element.innerWidth() + 1));
};
$(document).ready(function () {
$("td").mouseenter(function () {
var cella = $(this);
var isTruncated = cella.filter(":truncated").length > 0;
if (isTruncated) cella.attr("title", cella.text());
else cella.attr("title", null);
});
});