Here are two other pure CSS solutions:
.overflow {_x000D_
overflow: hidden;_x000D_
-ms-text-overflow: ellipsis;_x000D_
text-overflow: ellipsis;_x000D_
white-space: nowrap;_x000D_
}_x000D_
_x000D_
.overflow:hover {_x000D_
overflow: visible;_x000D_
}_x000D_
_x000D_
.overflow:hover span {_x000D_
position: relative;_x000D_
background-color: white;_x000D_
_x000D_
box-shadow: 0 0 4px 0 black;_x000D_
border-radius: 1px;_x000D_
}
_x000D_
<div>_x000D_
<span class="overflow" style="float: left; width: 50px">_x000D_
<span>Long text that might overflow.</span>_x000D_
</span>_x000D_
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis._x000D_
</div>
_x000D_
.wrap {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.overflow {_x000D_
white-space: nowrap; _x000D_
overflow: hidden;_x000D_
text-overflow: ellipsis;_x000D_
_x000D_
pointer-events:none;_x000D_
}_x000D_
_x000D_
.overflow:after {_x000D_
content:"";_x000D_
display: block;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0;_x000D_
width: 20px;_x000D_
height: 15px;_x000D_
z-index: 1;_x000D_
border: 1px solid red; /* for visualization only */_x000D_
pointer-events:initial;_x000D_
_x000D_
}_x000D_
_x000D_
.overflow:hover:after{_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
.tooltip {_x000D_
/* visibility: hidden; */_x000D_
display: none;_x000D_
position: absolute;_x000D_
top: 10;_x000D_
left: 0;_x000D_
background-color: #fff;_x000D_
padding: 10px;_x000D_
-webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3);_x000D_
opacity: 0;_x000D_
transition: opacity 0.5s ease;_x000D_
}_x000D_
_x000D_
_x000D_
.overflow:hover + .tooltip {_x000D_
/*visibility: visible; */_x000D_
display: initial;_x000D_
transition: opacity 0.5s ease;_x000D_
opacity: 1;_x000D_
}
_x000D_
<div>_x000D_
<span class="wrap">_x000D_
<span class="overflow" style="float: left; width: 50px">Long text that might overflow</span>_x000D_
<span class='tooltip'>Long text that might overflow.</span>_x000D_
</span>_x000D_
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis._x000D_
</div>
_x000D_