Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。
最简单的触发方式如下：
html代码：
<button type="button"
class="btn btn-default"
data-toggle="popover"
data-placement="left"
title="提示框居左"
data-content="我是弹出框的内容">
猛击我吧
</button>
js代码：
$(function(){
$('[data-toggle="popover"]').popover();
});
注意：上面这种方法注意要使用 data- 设置弹出框的属性。
使用JS设置参数：
html代码：
<button type="button"
class="btn btn-default"
id="myPopover">
猛击我吧
</button>
除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些data属性，如：
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top"
});
});
如下面示例所示：
调用popover的时候，options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置，以便制作出各式各样的效果。
我来试试：在38行补充代码，使用JS方法弹出提示框并设置参数
效果图如下：
参考代码如下：
$(function(){
$('[data-toggle="popover"]').popover();
$('#myPopover').popover({
title:"弹出框的标题",
content:"弹出框的内容",
placement:"right"
});
});
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报