Как я могу исправить положение всплывающих подсказок в прокручиваемом ? ⇐ CSS

[Anonymous]

У меня возникли проблемы с расположением всплывающих подсказок в столбце данных в таблице, которая сама находится внутри элемента div с вертикальной прокруткой. Немного предыстории...

Из-за проблем с устаревшими версиями, которые находятся вне моего контроля, разрабатываемую мной страницу приходится отображать через iframe фиксированной ширины и высоты. . Данные, которые мне нужно отобразить, содержат около 12 столбцов, и все они должны быть отображены. Один столбец будет содержать серийные номера, которые иногда выходят за пределы ячейки. Я установил переполнение этого столбца так, чтобы оно отображало многоточие, и добавил всплывающие подсказки, как описано в принятом ответе на этот вопрос.

Когда всплывающие подсказки добавляются, кажется, что он берет расстояние от верхней части таблицы до наведенной ячейки и рисует всплывающую подсказку на этом расстоянии от вершины родительского элемента div. Это означает, что когда вы прокручиваете элемент div вниз, всплывающие подсказки оказываются ниже нижней части элемента div.

Я создал jsFiddle, который демонстрирует это. : http://jsfiddle.net/kuzxLwxe/4/

Вот мой 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;
}

И мой HTML:

Код: Выделить всё

Serial Number




31199858152063119985815206


56658114865865665811486586

...

Я использую jQuery для других целей на той же странице, но пока не смог найти с его помощью решение. Если вы считаете, что лучший способ исправить это — использовать JS или jQuery, мне бы хотелось увидеть результат!

Заранее спасибо

Подробнее здесь: https://stackoverflow.com/questions/259 ... olling-div