twitter-bootstrap - 是否可以将 id 分配给 Twitter Bootstrap 弹出窗口？

Question

我已经能够显示 Twitter Bootstrap 弹出窗口，但是有没有办法在创建时为它们分配 id，以便我可以操纵它们？

到目前为止，这是我的代码：.js

$('#test-button').popover({content:'test.', trigger:'click'});
$('#test-button').popover('show');

.html

<a id='test-button' rel='popover'>

Answer 1

有几个选项可以用来获取 popover 元素：

1) 修改Boostrap Popover以接受选项对象上的 id 属性并将其注入模板（行：102）

2) 使用 id 设置弹出框选项的 html 属性，例如

$('#test-button').popover({html: true, content: '<div id="test-popover-content">... </div>'})

然后通过访问弹出容器

var testPopover = $('#test-popover-content').parent().parent();

Answer 2

最简单的方法是使用所需的 id指定模板。

创建弹出框时要使用的基本 HTML。

弹出框的标题将被注入到 .popover-title 中。

弹出框的内容将被注入到 .popover-content 中。

.arrow 将成为弹出框的箭头。

最外层的包装元素应该有 .popover 类。

这是默认模板值：

 '<div class="popover" role="tooltip">
     <div class="arrow"></div>¸
     <h3 class="popover-title"></h3>
     <div class="popover-content"></div>
  </div>'

你可以像这样使用它

$(#your-pop-over).popover({
     template:'<div id="your-id" class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'       
    });