使用 bootstrap 3 popover 内表未显示在按钮顶部

Posted 2023-04-13

【中文标题】使用 bootstrap 3 popover 内表未显示在按钮顶部

【英文标题】：Using bootstrap 3 popover inside table not showing on top of button

【发布时间】：2021-01-15 20:32:59

【问题描述】：

需要弹出框来显示用户列表，但它没有显示在按钮的顶部。

这里是 jQuery 代码：

$('[data-toggle="popover"]').popover();

这是表格行内动态按钮的 C# 代码。

<br />
<button title='" + User List + @"' data-original-title='' type='button' class='btn btn-default popovers' data-toggle='popover' data-placement='top' data-html='true' data-content='" + rtnStr + "'>" + Show Users + @"</button>

【问题讨论】：

动态添加按钮后是否初始化弹出框？

是的，它是在数据来自表中的数据库时初始化的，但是在单击左侧的显示后。该属性设置为顶部，但它向左移动。

【参考方案1】：

通过计算元素的自定义宽度并找到弹出框的确切位置来解决此问题。

这里是 jQuery 代码

$(document).on('click', '[data-toggle=popover]', function (e) 
            $('[data-toggle=popover]').not(this).popover('hide');
            var x = ($(window).width() - ($(this).offset().left + $(this).outerWidth().width()));
            $(this).popover('show');
            $('.popover').css( "right": (x - 116) + "px", "left": "auto" );
        );