Twitter Bootstrap Popover - DOM 插入位置答案

【问题标题】：Twitter Bootstrap Popover - DOM Insertion LocationTwitter Bootstrap Popover - DOM 插入位置
【发布时间】：2012-11-02 09:17:48
【问题描述】：

我的 Bootstrap 弹出框工作正常，但弹出框被附加到文档底部的 body 中，而不是在触发元素下方，就像它在引导文档中所做的那样：@987654321 @

有人知道如何控制弹出框的插入位置吗？或者至少，让它附加到触发元素父级？

这是我所拥有的：

http://jsfiddle.net/qt34N/4/

 <a href="#" class="btn" rel="popover" data-placement="top" 
  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." 
  data-original-title="Popover on top">Popover on top</a>

jQuery:

$("a[rel=popover]").popover();

建议？

【问题讨论】：

将它附加到某个位置的原因是什么？围绕框架/库编写代码通常比在可能的情况下修改框架/库更好。
是的，我宁愿不修改框架/库。我是说我得到的结果与引导文档演示所给出的结果不同，它们将弹出框放置在单击元素的正下方。在我所有的尝试中，弹出框都放置在的底部。知道为什么？我也在使用最新版本。

标签： jquery twitter-bootstrap popover

【解决方案1】：

演示使用的是较新版本的引导程序。更新到最新版本，它将按照您的意愿执行。

http://jsfiddle.net/qt34N/10/

jQuery(document).ready(function($) {
    $("a[rel=popover]").popover();
});

【讨论】：

是的，我使用的是 2.1.1 版本，当我升级到 2.2.1 时，弹出框被放置在点击元素之后。谢谢！
我正在使用 bootstrap v 4.1，但它仍然在正文结束标记之前附加了弹出内容。我在 tr td 中有弹出框按钮，我希望弹出框内容在同一个地方。有没有办法做到这一点？
我对bootstrap 4x一无所知

【解决方案2】：

您是否根据需要包含工具提示 (bootstrap-tooltip.js)？
http://twitter.github.com/bootstrap/javascript.html#tooltips

向任何元素添加小的内容覆盖，例如 iPad 上的内容，以容纳辅助信息。将鼠标悬停在按钮上以触发弹出窗口。 需要包含工具提示。

就展示位置而言，您可以在选项中进行设置：

$('#example').popover({placement:'top'})

或通过data属性：

data-placement="top"

【讨论】：

是的，我正在加载整个 bootstrap.min.js，它会加载所有插件，包括 bootstrap-tooltip.js...影响物理外观放置，而不是它在 dom 中的放置。