JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <span class="title">Some very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text</span>
 
        <span class="tip">tip for this item extends beyond end of ellipsis</span>

    </li>
    <li></li>
</ul>

CSS

ul {
    list-style: none;
    min-width: 50px;
    width: 100px;
    margin: auto;
    display: inline-table;
    margin-right: 5px;
    overflow: visible;
}
li {
    position: relative;
}
.title {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tip {
    display: none;
}

li:hover .tip {
    display: block;
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    width: 300px;
}