JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

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><span data-toggle="tooltip" data-placement="bottom" title="33333333333333333333333333333333">3333333333333333</span></td>
      <td>test</td>
      <td>33333333333333333333333333333333</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);
  });
});


$('.tableGrid.bodyTable')

$("").tooltip('hide');*/

$(document).ready(function() {
  $("[data-toggle='tooltip']").tooltip('show');
});

/*
[data-tooltip]:truncated:hover::after {
    content:attr(data-tooltip);
}*/