How can I fix the position of the tooltips in the scrolling <div>?

I am having some trouble positioning the tooltips in a data column within a table that is itself inside a vertical scrollable div. A little background for you ...

Due to legacy issues that are out of my control, the page I am developing needs to render via a fixed width and height iframe. The data I need to display contains about 12 columns, all of which should be displayed. One column will contain serial numbers, which sometimes end up overflowing cell boundaries. I set this column to overflow to display ellipsis and added tooltips as described in the accepted answer to this question.

When the tooltips are added, it appears to take the distance from the top of the table to the hovered cell and draws the tooltip spaced from the top of the parent div. This means that as you scroll down the div, the tooltips end up below the bottom of the div.

I created a jsFiddle that demonstrates this: http://jsfiddle.net/kuzxLwxe/4/

Here is my css:

.ResultsWrapper {
    width:150px;
    height:314px;
    text-align:center;
    overflow-x:hidden;
    overflow-y:scroll;
    border:1px solid black;
}
.ResultsTable {
    width:86px;
    border-collapse:collapse;
    table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ColumnSerialNo {
   width:81px;
}
.hasTooltip span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
}
.hasTooltip:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
}

      

And my html:

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

      

I am using jQuery for other things on the same page, but still couldn't find a solution with it. If you think the best way to fix this is with JS or jQuery, I'd love to see the result!

Thank you in advance

+3


source to share


1 answer


Change your HTML markup to have more control over overflow

:

<tr>
    <td class="hasTooltip">
        <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815206</div>
            <div class="SerialNumberTooltip">3119985815206</div>
        </div>
    </td>
</tr>

      

And in your CSS remove overflow

from td

:

.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    /* overflow: hidden; this line should delete */
    text-overflow:ellipsis;
}

      



And the new CSS:

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

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

.SerialNumberTooltip {
    position: absolute;
    top: 10px;
    left: 2px;
    background-color: #FFF;
    border: 1px solid #CCC;
    display: none;
}

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

.SerialNumberContainer:hover .SerialNumberTooltip {
    display: block;
}

      

JSFiddle Demo .

+3


source







All Articles