通过DataTables JQuery覆盖Bootstrap Popover

ErcanE

我正在使用DataTables JQuery,并且每一行都有动态文本。该数据表在模态上显示。

我正在尝试使用bootstrap popover,但无法正常工作,看起来像被桌子覆盖了。

我的弹出式窗口的一半没有显示。

在此处输入图片说明

小提琴链接似乎有效,但就我而言(使用动态数据表加载远程模式无效

桌子

<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>

感谢前进!

更新:

我的丑陋解决方案是

小提琴将行扩展到底部(按预期方式运行localhost,但在小提琴上看起来不正常)

在此处输入图片说明

更新2

当我设置'container'时:'body'popover落后于modal!知道如何领先吗?

在此处输入图片说明

ErcanE

这是模态的解决方案

这将对Modal用户有所帮助

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更改页面后jQuery dataTables中的Popover不起作用

来自分类Dev

Bootstrap Popover:通过2个不同的链接打开一个Popover

来自分类Dev

Bootstrap Popover覆盖标题并保持样式

来自分类Dev

Selenium ElementNotVisibleException for Bootstrap Popover

来自分类Dev

Bootstrap Popover在中间对齐

来自分类Dev

Bootstrap Popover Border CSS

来自分类Dev

Bootstrap Popover和Rails

来自分类Dev

Ajax的Bootstrap Popover

来自分类Dev

Bootstrap Popover Border CSS

来自分类Dev

Bootstrap Popover问题

来自分类Dev

Selenium ElementNotVisibleException for Bootstrap Popover

来自分类Dev

Bootstrap Popover功能

来自分类Dev

LI中的Bootstrap Popover

来自分类Dev

将jquery.validate与bootstrap popover集成

来自分类Dev

Bootstrap popover title选项不覆盖html元素标题

来自分类Dev

Popover Bootstrap通过延迟通过HTML属性显示和隐藏值

来自分类Dev

如何为dataTables中的元素运行popover?

来自分类Dev

通过Cloudinary / CarrierWave gem在带有红宝石代码的Popover Bootstrap中显示图像

来自分类Dev

如何通过数据内容属性在Bootstrap 3 Popover中传递HTML内容

来自分类Dev

Bootstrap Popover视口属性

来自分类Dev

如何获得Bootstrap Popover高度?

来自分类Dev

Bootstrap Popover不起作用

来自分类Dev

Bootstrap Popover不会保存ckeckbox

来自分类Dev

UI Bootstrap Popover:更改宽度

来自分类Dev

单击并悬停Bootstrap 3 Popover

来自分类Dev

Bootstrap Popover和图像映射

来自分类Dev

Bootstrap Popover无法正常工作

来自分类Dev

浮动元素上的Bootstrap Popover

来自分类Dev

Bootstrap Popover不起作用