Bootstrap的popover.js如何自定义弹出内容？

Question

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>

Answer 1

刚好我在网上搜，看到这个问题，找不到解决办法，看着$("identifier").popover(options);突然就醒悟了，options 就是 Options can be passed via data attributes or JavaScript.。

html 代码：

<button id="custom" class="btn btn-default" data-toggle="popover" title="显示的标题" data-placement="bottom" data-content='显示的内容'>点我</button>

js 代码：

$(document).ready(function() {
    $('#custom').popover(
        {
            trigger:'click', //触发方式
            template: '你自定义的模板', 
            html: true, // 为true的话，data-content里就能放html代码了
            // 还有很多选项 ……
        }
    );
}

Answer 2

<button id="custom" class="btn btn-default" data-toggle="popover" data-html="true" title="显示的标题" data-placement="bottom" data-content='<h3 style="color:#F00;">显示的内容</h3><button type="submit">pop的按钮</button>'>点我</button>

添加data-html="true"之后,data-content里面就可以添加HTML代码

Answer 3

//面板初始化
$('[data-toggle="popover"]').popover({
  template:'<div class="popover" style="right:5px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
  title:"是否删除本条任务？",
  placement:'bottom',
  html:true,
  trigger:'click'
});

<a href="javascript:void(0)" class="text-danger mkUser-del" data-toggle="popover" data-content="<button class='btn btn-sm btn-danger pull-right mkUser-ProCancel' type='button'>取消</button><button class='btn btn-sm btn-primary' type='button' onclick='mkUserTabOk(54646546)'>确定</button>">删除</a>

请问如何写取消呢？