Twitter Bootstrap弹出框 - DOM插入位置

Question

Twitter Bootstrap弹出框 - DOM插入位置

3

我已经成功使用了Bootstrap Popovers，但是Popover会被附加到文档底部的body，而不是像在Bootstrap文档中所示，仅出现在触发元素下方: http://twitter.github.com/bootstrap/javascript.html#popovers 有人知道如何控制Popover插入的位置吗？或者至少让它附加到触发元素的父级？

以下是我的代码:

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();

建议？

- chuuke

1

在特定位置添加它的原因是什么？如果可能的话，最好围绕框架/库编写代码，而不是修改框架/库。 - Kevin B

1

是的，我宁愿不修改框架/库。我的意思是说，我得到的结果与 Bootstrap 文档演示给出的结果不同，Bootstrap 文档演示把弹出框放在了点击元素的正下方。在我所有尝试中，弹出框都被放置在<body>底部。知道为什么吗？我也使用了最新版本。 - chuuke

2个回答

0

你是否已经按照要求包含了工具提示（bootstrap-tooltip.js）？
http://twitter.github.com/bootstrap/javascript.html#tooltips

为任何元素添加小型内容覆盖层，类似于iPad上的那些，以容纳次要信息。将鼠标悬停在按钮上即可触发弹出窗口。需要包含工具提示。

至于位置方面，您可以在选项中设置：

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

或通过 data 属性：

data-placement="top"

- stormdrain

是的，我正在加载整个bootstrap.min.js，它会加载所有插件，包括bootstrap-tooltip.js... 是的，放置选项对我两种方式都有效，但只影响物理外观位置，而不是在dom中的位置。 - chuuke

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin B · Accepted Answer

该演示使用了较新版本的Bootstrap。更新到最新版本，它将按照您的要求执行。

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

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