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

【问题标题】：Using bootstrap 3 popover inside table not showing on top of button使用 bootstrap 3 popover 内表未显示在按钮顶部
【发布时间】：2023-03-21 04:05:01
【问题描述】：

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

这里是 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>

【问题讨论】：

动态添加按钮后是否初始化弹出框？
是的，它是在数据来自表中的数据库时初始化的，但是在单击左侧的显示后。该属性设置为顶部，但它向左移动。

标签： javascript c# jquery asp.net twitter-bootstrap

【解决方案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" });
        });

【讨论】：