JSFiddle - React, Tailwind, and code Playground

HTML

<div class="truncate my-tooltip tooltip-on-truncate">
    <span>
        This content is huge and is truncated in its space.
    </span>
</div>

CSS

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

JavaScript

$(document).on("mouseenter", ".tooltip-on-truncate:not(.contentEditable)", function (e) {
    var target = $(this);

    if (!target.attr('title')) {
        target.attr('title', target.text());
    }
});