Bootstrap框架中觸發(fā)彈出框和提示框一樣不能直接通過HTML的自定義data屬性來觸發(fā)。需要依賴于JavaScript腳本。
最簡單的觸發(fā)方式如下：
html代碼：
<button type="button"
class="btn btn-default"
data-toggle="popover"
data-placement="left"
title="提示框居左"
data-content="我是彈出框的內(nèi)容">
猛擊我吧
</button>
js代碼：
$(function(){
$('[data-toggle="popover"]').popover();
});
注意：上面這種方法注意要使用 data- 設置彈出框的屬性。
使用JS設置參數(shù)：
html代碼：
<button type="button"
class="btn btn-default"
id="myPopover">
猛擊我吧
</button>
除此之外，也可以單獨指定一個元素，在該元素上調(diào)用提示框，并且可能通過JavaScript的各種參數(shù)來實現(xiàn)，無需定義一些data屬性，如：
$(function(){
$('#myPopover').popover({
title:"我是彈出框的標題",
content:"我是彈出框的內(nèi)容",
placement:"top"
});
});
如下面示例所示：
調(diào)用popover的時候，options的參數(shù)與聲明式選擇里以data-開頭的自定義屬性一樣。都可以在options里設置，以便制作出各式各樣的效果。
我來試試：在38行補充代碼，使用JS方法彈出提示框并設置參數(shù)
效果圖如下：
參考代碼如下：
$(function(){
$('[data-toggle="popover"]').popover();
$('#myPopover').popover({
title:"彈出框的標題",
content:"彈出框的內(nèi)容",
placement:"right"
});
});
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報