DataTable, положение элемента не меняется при наведении

Question

У меня есть таблица данных с динамически добавленным содержимым и элементом блока для отображения данных при наведении курсора, все работает, кроме того, что я делаю в CSS, я не могу изменить положение блока. Единственный вариант, который работает, это abosulte, но он только прикрепляет блок к нижней части таблицы, когда я выбираю что-либо еще в позиции, так как блок не отображается, я попытался вручную изменить свойства верхнего / левого, без изменений в блоке Если я не описал проблему должным образом, я могу включить html / js / css или сделать скрипку, если это необходимо. Спасибо!

РЕДАКТИРОВАТЬ: добавление фрагментов кода:

HTML для данных:

<table class="table table-striped datatable-sort compact">
                <thead>
                    <tr>
                        <th scope="col">Time</th>               <!--Created-->
                        <th scope="col">Lane</th>               <!--LaneNumber-->
                        <th scope="col">Credence(%)</th>        <!--Credence-->
                        <th scope="col">LPN</th>                <!--Plate-->
                        <th scope="col">LPN(%)</th>             <!--PlateConfidence-->
                        <th scope="col">Country</th>            <!--CountryCode-->
                        <th scope="col">Country(%)</th>         <!--CountryConfidence-->
                        <th scope="col">Speed(km/h)</th>        <!--Speed-->
                        <th scope="col">Speed change(km/h)</th> <!--SpeedDifference-->
                        <th scope="col">Width(cm)</th>          <!--Width-->
                        <th scope="col">Height(cm)</th>         <!--Height-->
                        <th scope="col">Length(cm)</th>         <!--Length-->
                        <th scope="col">Weight(kg)</th>         <!--Weight-->
                        <th scope="col">Axles</th>              <!--Axles-->
                        <th scope="col">VehicleID</th>          <!--ID-->
                        <th scope="col">ClassEUR13</th>         <!--Classification-->
                        <th scope="col">Version</th>            <!--null-->
                        <th scope="col">Title</th>              <!--null-->
                        <th scope="col">Direction</th>          <!--Direction-->
                        <th scope="col">Certainty</th>          <!--null-->
                        <th scope="col">Axles Count</th>        <!--AxleCount-->
                        <th scope="col">Gross Weight</th>       <!--null-->
                        <th scope="col">Axles 1 weight(kg)</th> <!--Axles[0].Weight-->
                        <th scope="col">Axles 2 weight(kg)</th> <!--Axles[1].Weight-->
                        <th scope="col">Heading (sec)</th>      <!--Height-->
                        <th scope="col">Gap (sec)</th>          <!--Gap-->
                        <th scope="col">Digital Signature</th>  <!--null-->
                        <th scope="col">Checksum</th>           <!--Checksum-->
                    </tr>
                </thead>
            </table>

CSS для элемента наведения:

.table-hover {
display: none;
bottom: 31px;
left: 57px;
z-index: 20;
position: absolute;
width: 550px;
height: 180px;
background-color: white;
box-shadow: 1px 5px 20px 0px #9498a4;

}

ЯШ:

$('.datatable-sort').on('mouseenter', 'tr', function () {
    console.log('hovered in');
    var id;
    var data = $('.datatable-sort').DataTable().row(this).data();
    $('.datatable-sort th').each(function () {
        if ($(this).text() == "VehicleID") {
            id = data[$(this).index()];
        }
    });
    this.parentElement.parentElement.appendChild(CreateHoverElement());
    document.getElementById('tablehover').style.display = 'block';
    document.getElementById('tablehover').style.webkitAnimation = 'slide-down .3s ease-out';
    document.getElementById('hoverID').innerHTML = '' + id;
    $.connection.ldServiceHub.server.clientHoverRequestImage(id);       
});

$('.datatable-sort').on('mouseleave', 'tr', function () {
    console.log('hovered out');
    document.getElementById('tablehover').remove();
});

Примечание: добавление элемента в tbody или tr / td не имеет значения.