Bootstrap DataTables 的 Popover 覆盖 JQuery

Question

我正在使用 DataTables JQuery 并且每一行都有动态文本。此数据table 显示在 Modal 上。

我正在尝试使用 bootstrap 弹出框，但不起作用 right.Its 看起来像是 table 的叠加层。

我的弹出窗口有一半没有出现。

fiddle link 似乎有效，但就我而言（使用动态数据加载远程模态table 不起作用

Table

<td class="noteTable">
    <div class="show-popover" data-toggle="popover" title="{{$log->newStatusText}}">
        {{substr(($log->newStatusText),0,50)}}
    </div>
</td>

脚本是

<script type="text/javascript">
$('[data-toggle="popover"]').popover({
    'trigger': 'hover',
    'placement': 'left',
});

我的数据table脚本

<script type="text/javascript">
$(document).ready(function() {
    $('#showLogTable').dataTable( {
        "order": [[ 4, "desc" ]],
        "scrollY": 400,
        "destroy": true,
        "pagingType": "simple",
        "scrollCollapse": true,
        "dom": '<"top"f>t<"bottom"ip><"clear">'
    } );
} ); 
</script>

感谢提前！

更新：

我丑陋的解决方案是

fiddle 将行扩展到底部（按预期工作本地主机但在 fiddle 上看起来不工作）

更新 2

当我设置 'container' 时：'body' 弹出框落后于模态！知道如何带前面吗？

Answer 1

将弹出窗口的 container 选项设置为 body。

$('[data-toggle="popover"]').popover({
    'trigger': 'hover',
    'placement': 'left',
    'container': 'body'
});

Answer 2

这是模态的解决方案

这对 Modal 用户有帮助

$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
'container': '.modal-body'
});

Bootstrap DataTables 的 Popover 覆盖 JQuery

Bootstrap Popover overlay by DataTables JQuery

twitter-bootstrap-3

datatables

popover