Всплывающее окно при наведении курсора не перемещается при прокрутке родительского узла влево

Question

есть. Я пытался сделать всплывающее окно при наведении. Когда моя мышь наведет курсор на заголовок таблицы, появится подробное объяснение. Однако когда я прокручиваю таблицу слева, всплывающее окно остается. Есть ли способ, которым я могу заставить его придерживаться заголовка?

Jsfiddle Link: https://jsfiddle.net/fmchen/hmaczn87/10/

Некоторые скриншоты:

При прокрутке влево:

Я знаю, что могу изменить position: absolute; на position: relative; в .CellComment1 Однако, это будет выглядеть так это:

Answer 1

Я добавил положение: относительное; к классу field_29, то позиция: абсолютная; на пролете, и он работал правильно. Если вы хотите быть в 1 строке, добавьте span a width: max-content; и для выравнивания по центру добавьте поле слева: 50%; и преобразование: translateX (-50%);

.field_29:hover span.CellComment{   display: block;   position: absolute;   width: max-content;   margin-left: 50%;   transform: translateX(-50%); }

.field_29 {   position: relative; }