JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/enyo/opentip/master/downloads/opentip-jquery.min.js"></script>
<h3>width = 235px</h3>
<span style="max-width: 235px">
    ちょっと長い文字列が表示されたら
</span>

<span class="autotip" style="max-width: 235px">
    ちょっと長い文字列が表示されたら
</span>

<h3>width = 255px</h3>
<span style="max-width: 255px">
    ちょっと長い文字列が表示されたら
</span>

<span class="autotip" style="max-width: 255px">
    ちょっと長い文字列が表示されたら
</span>

<h3>width = 256px</h3>
<span style="max-width: 256px">
    ちょっと長い文字列が表示されたら
</span>

<span class="autotip" style="max-width: 256px">
    ちょっと長い文字列が表示されたら
</span>

CSS

span {
    display: block;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 2px;
    
    font-family: 'MS Gothic';
    font-size: 11pt;
    margin: 6px;
}

.autotip {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}



.opentip-container,
.opentip-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.opentip-container {
  position: absolute;
  max-width: 300px;
  z-index: 100;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  -ms-transition: -ms-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  pointer-events: none;
  -webkit-transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}
.opentip-container.ot-fixed.ot-hidden.stem-top.stem-center,
.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-center,
.opentip-container.ot-fixed.ot-hiding.stem-top.stem-center {
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
.opentip-container.ot-fixed.ot-hidden.stem-top.stem-right,
.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-right,
.opentip-container.ot-fixed.ot-hiding.stem-top.stem-right {
  -webkit-transform: translateY(-5px) translateX(5px);
  -moz-transform: translateY(-5px) translateX(5px);
  -o-transform: translateY(-5px) translateX(5px);
  -ms-transform: translateY(-5px) translateX(5px);
  transform: translateY(-5px) translateX(5px);
}
.opentip-container.ot-fixed.ot-hidden.stem-middle.stem-right,
.opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-right,
.opentip-container.ot-fixed.ot-hiding.stem-middle.stem-right {
  -webkit-transform:...

JavaScript

$('.autotip').on('mouseenter', function(e) {
    var $e = $(this), h = $e.height(), ow = this.offsetWidth, sw = this.scrollWidth;
    $e.css({'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'});
    if (ow  < sw || $e.height() > h) {
        $e.opentip($e.text() + '\rwidth = ' + $e.css('width'), {removeElementsOnHide: true, style: 'dark'}).prepareToShow();
    }
    $e.css({overflow: '', 'white-space' : '', 'word-break': ''});
    if ($e.attr('style') === '') {
        $e.removeAttr('style');
    }
}).on('mouseleave', function(e) {
    var tips = $(this).data('opentips');
    tips && (tips.forEach(function(t) {t.deactivate();}), $(this).removeData('opentips'));
});