Bootstrap的popover.js如何自定义弹出内容？
popover插件的popover-content的内容如何自定html例如添加输入框和按钮？是不是用template的定义popover模板？怎样实现？
目前想写入如下内容：
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content">
<div class="form-group">
<label></label>
<input type="text"></div>
<button type="button" class="btn btn-primary">确认</button>
<button type="button" class="btn btn-default" data-dismiss="popover">取消</button>
</div>
</div>
cactus
11 years, 11 months ago
Answers
有两种方法：
一种是直接将html写在 data-content中，同时，需要将data-html设置为true，具体如下
<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" data-toggle="popover" class="btn btn-primary" id="test">Top popover</a>
另一种方法是通过js
如下：
Popover JS 代码:
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
Popover HTML 代码:
<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">some title</div>
<div id="popover-content" class="hide">
<form>
<!-- my form -->
</form>
</div>
2010注册
answered 9 years, 11 months ago