JSFiddle - React, Tailwind, and code Playground

by benkennedy

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<table class="table custom-table">
    <tr>
        <td data-toggle="tooltip" data-placement="bottom" title="Tooltip">
            Table Scrolling Issue
        </td>
        <td>When the table row gets too long</td>
        <td>The tooltip doesnt not align correctly</td>
        <td>To the corresponding cell element</td>
        <td data-toggle="tooltip" data-placement="bottom" title="Tooltip">
            Hover for an example
        </td>
    </tr>
</table>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>

CSS

TABLE.custom-table {
    margin:15px;
    width:1200px;
 }

JavaScript

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