JSFiddle - React, Tailwind, and code Playground

by rajeevRF

HTML

<div class="ResultsWrapper">
    <table class="ResultsTable">
        <thead>
            <tr>
                <th class="ColumnSerialNo">Serial Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div...

CSS

.ResultsWrapper {
    width:150px;
    height:314px;
    text-align:center;
        overflow-y:scroll;
    border:1px solid black;
    z-index:-1;
}
.ResultsTable {
    width:86px;
    border-collapse:collapse;
    table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    text-overflow:ellipsis;
}
.ColumnSerialNo {
    width:81px;
}

.SerialNumberContainer {
    position: relative;
    z-index: 10;
}

.SerialNumber {
    width: 80px;
    overflow: hidden;
}

.SerialNumberTooltip {
    position: fixed;
    top: 10px;
    left: 70px;
    background-color: #FFF;
    border: 1px solid #CCC;
    display: none;
    z-index:99999999999;
}

.SerialNumberContainer:hover {
    z-index: 20;
}

.SerialNumberContainer:hover .SerialNumberTooltip {
    display: block;
    z-index: 40;
}