JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th class="wd20">#</th>
            <th class="wd100">Phrase</th>
            <th>Movie</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.</td>
            <td>
                <div class="iffyTip wd100">Supercalifragilisticexpialidocious</div>
            </td>
            <td>Mary Poppins</td>
        </tr>
        <tr>
            <td>2.</td>
            <td>This is Sparta!</td>
            <td>300</td>
        </tr>
    </tbody>
</table>

CSS

.wd20 {
    width:20px;
}
.wd100 {
    width:100px;
}
.iffyTip {
    overflow:hidden;
    /* white-space:nowrap; */
    text-overflow:ellipsis;
}

JavaScript

$(document).on('mouseenter', ".iffyTip", function () {
     var $this = $(this);
     if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
         $this.tooltip({
             title: $this.text(),
             placement: "bottom"
         });
         $this.tooltip('show');
     }
 });