1.Bootstrap彈出框示例

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">點我彈出/隱藏彈出框</button>

2.改進

有時提示框內容較多，僅僅使用data-content,title,在html文件裡寫出來比較亂，我們可以藉助提供的popover（）方法，實現對彈出框內容、樣式的修改。

$("#btn-danger").popover({
    html: true,      //實現對html可寫
    title: keywords_title(),   //標題函式
    content: function() {
        return keywords_content();   //內容函式
    }
});
//標題函式  
function keywords_title() {
    return '結果說明：';
}

//內容函式，同時對樣式進行修改
function keywords_content() {
    var data = $('<div style="width:700px;color: #787671" ><p><span>提及結果列關鍵詞不區分英文大小寫</span></p></div>'
 
);
}

//以下是彈出框樣式，可以根據需要自定義修改
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    white-space: normal;
    background-color: #fff
 
;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}