自定义弹出菜单twitter-bootstrap over tooltip并在单击按钮时显示

Question

Html文件：

<a
id="popoverMenu"
data-toggle="popover" data-placement="bottom" 
data-title = "Some title"
data-container="body"
data-html = "true" 
data-content=' 
    <!-- row 1-->
    <div class = "row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button1</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button2</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button3</a>
        </div>
    </div>

    <!-- row 2-->
    <div class = "row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button1</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button2</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button3</a>
        </div>
    </div>
    ...
    <!-- row n-->
    <div class = "row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button1</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button2</a>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "some.url.com" type="button" class="btn btn-default">button3</a>
        </div>
    </div>
'
</a>

data-html ：允许您在数据内容中编写html。

如果您想要自定义宽度弹出框，可以下载自定义框架引导程序 部分＆＃34;定制＆＃34;并设置首选项的宽度：Popovers-＆gt; @popover-max-width

JS档案

$(document).ready(function(){
    //Create the instance of popover
    $('#popoverMenu').popover();

    //Create the instance of tooltips
    $('[data-toggle=tooltip]').tooltip();
});

Answer 1

如果你需要你的popover是定制设计意味着使用这个：

$('#popoverMenu').popover({ template: 'Your HTML Design with `class="popover-title"` and `class="popover-content"`'});

popover-title ：此标记将保存您在title属性中提供的标题

popover-content ：此标记将保留您在数据内容属性中提供的内容

REFERENCE LINK