jQuery – Show Tooltip on Long Text with Ellipsis AKA DOTDOT

Sometimes in grids, we have long strings of data to show in cells, but they not only distort the UI but also make all data visible even when not necessary. So to resolve these scenarios what we can do is to show access data in tooltip on hover and by default exceeding data from a limit be hidden in the ellipse or what we say DOTS (…). This method makes grid balanced to see, more compact and clean to analyze.

Here we will use the bootstrap tooltip to show excess string in cells and also use some jQuery methods, and a pinch of CSS to make it work smooth.

Let’s get started…

HTML

    <table style="width: 800px;" class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
                <th>Saying</th>
                <th>Street</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span class="truncate">Jamarion Hays</span>
                </td>
                <td>
                    <span class="truncate">222 Coffee Court Ocean Springs, MS 39564</span>
                </td>
                <td>
                    <span class="truncate">monkeydo@outlook.com</span>
                </td>
                <td>
                    <span class="truncate">A diplomat is one who thinks twice before saying nothing.</span>
                </td>
                <td>
                    <span class="truncate">Somerset Drive</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="truncate">Brooks Reynolds</span>
                </td>
                <td>
                    <span class="truncate">9404 San Pablo Court South Richmond Hill, NY 11419</span>
                </td>
                <td>
                    <span class="truncate">amimojo@hotmail.com</span>
                </td>
                <td>
                    <span class="truncate">An apple a day keeps the doctor away.</span>
                </td>
                <td>
                    <span class="truncate">Woodland Avenue 7th Street</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="truncate">Alondra Swanson</span>
                </td>
                <td>
                    <span class="truncate">9047 Whitemarsh Street Marlborough, MA 01752</span>
                </td>
                <td>
                    <span class="truncate">squirrel@hotmail.com</span>
                </td>
                <td>
                    <span class="truncate">I like turtles.</span>
                </td>
                <td>
                    <span class="truncate">Hawthorne Avenue</span>
                </td>
            </tr>
        </tbody>
    </table>

JavaScript

    $(function() {
        function addTooltip() {
            $(".truncate").each(function() {
                var thisTxt = $(this).text();
                var cloneEle = document.createElement("div");
                cloneEle = $(cloneEle);
                cloneEle.addClass("ele-clone");
                cloneEle.html(thisTxt);
                $("body").append(cloneEle);
                if ($(this).width() <= cloneEle.width()) {
                    $(this).attr("title", thisTxt);
                    $(this).tooltip();
                } else {
                    $(this).removeAttr("title");
                }
                cloneEle.remove();
            });
        };
        addTooltip();
    });

CSS

    .truncate {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 150px;
    }

    .ele-clone {
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
        position: fixed;
    }

See working demo here