JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<ul>
  <li>Li item - 1</li>
  <li>Li item - 2</li>
  <li>Li item - 3</li>
  <li>Li item - 4</li>
  <li>Li item - 5</li>
  <li>Li item - 6</li>
  <li>Li item - 7</li>
  <li>Li item - 8</li>
  <li>Li item - 9</li>
  <li>Li item - 10</li>
</ul>

CSS

ul {
  border: red solid 1px;
  width: 80px;
}

li {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
  height: 30px;
}

JavaScript

$(document).ready(function() {
  $.expr[':'].truncated = function(obj) {
    var element = $(obj);
    return (element[0].scrollHeight > (element.innerHeight() + 1)) || (element[0].scrollWidth > (element.innerWidth() + 1));

  };


  $("li").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');*/


/*
[data-tooltip]:truncated:hover::after {
    content:attr(data-tooltip);
}*/
/*$(document).ready(function() {
$("[data-toggle='tooltip']").tooltip('hide');
  $('td').on('mouseenter', function() {
    var $this = $(this);
    console.log('called');
    if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
      console.log('called if');
      $this.attr('title', $this.text());
      $("[data-toggle='tooltip']").tooltip('show');
    }
  });
});*/