DataTables JQuery 的 Bootstrap Popover 覆盖答案

【问题标题】：Bootstrap Popover overlay by DataTables JQueryDataTables JQuery 的 Bootstrap Popover 覆盖
【发布时间】：2016-02-24 19:08:16
【问题描述】：

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

我正在尝试使用引导弹出框，但无法正常工作。它看起来像桌子上的叠加层。

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

fiddle 链接似乎有效，但在我的情况下（使用动态数据表加载远程模式不起作用

表格

<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',
});

我的数据表脚本

<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 将行扩展到底部（按预期工作 localhost 但在小提琴上看起来不像工作）

更新 2

当我设置 'container': 'body' popover 落后于模态！知道如何把前面带上吗？

【问题讨论】：

当您的小提琴不是在复制问题或只是引入新问题导致人们相信问题与您的想法不同时，很难提供帮助。我在这里做了一个实际上与问题相对应的小提琴 -> jsfiddle.net/3by5hz2s 没问题。您的问题是其他问题，您没有做对或可能搞砸了 CSS - 但我们无法确定。

标签： twitter-bootstrap-3 datatables popover

【解决方案1】：

为弹出框将container 选项设置为body。

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

【讨论】：

这个解决方案弹出框出现在我的模态下，有什么想法可以放在前面吗？

【解决方案2】：

这是模态的解决方案

这将对模态用户有所帮助

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

【讨论】：