Bootstrap实现提⽰框和弹出框效果⾸先讲⼀讲提⽰框(Tooltip) 的使⽤⽅法
样式⽂件：
LESS版本：对应源⽂件 tooltips.less
<style id="jsbin-css">
body {
padding: 100px;
}
.btn {
margin: 20px 10px 20px;
}
</style>
</head>
<body>
<h3>按钮做的提⽰框</h3>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
data-original-title="提⽰框居左"
title="">
提⽰框居左
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="top"
data-original-title="提⽰框在顶部">
提⽰框在顶部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="提⽰框在底部">
提⽰框在底部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="right"
data-original-title="提⽰框居右">
提⽰框居右
</button>
<h3>链接制作的提⽰框</h3>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="left"
title="提⽰框居左">
提⽰框居左
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="top"
title="提⽰框在顶部">
提⽰框在顶部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="bottom"
title="提⽰框在底部">
提⽰框在底部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="right"
title="提⽰框在居右">
提⽰框居右
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip">
我是提⽰框
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip2">
我是提⽰框2
</a>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="maxcdn.bootstrapcdn/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
//添加提⽰框的事件
$('[data-toggle="tooltip"]').tooltip();
//能过js来更改提⽰框
$('#myTooltip').tooltip({
title:"我是⼀个提⽰框，我在顶部出现",
placement:'top'
});
});
</script>
通过 title 属性的值来定义提⽰信息(也可以使⽤⾃定义属性 data-original-title 来设置提⽰信息)。
通过 data-placement ⾃定义属性来控制提⽰信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表⽰提⽰框出现的位置在顶部、右边、底部和左边。
还有⼀个最重要的参数不可缺少，data-toggle=”tooltip”。
需要特别注意的是：
1、如果同时设置了 data-original-title 和 title 定义提⽰信息，那么 data-original-title 的优先级要⾼于 title。只有 data-original-title 值为空时，才会取 title 的值做为提⽰信息的内容。
2、Bootstrap框架中的提⽰框的触发⽅式和前⾯介绍的插件略有不同。不能直接通过⾃定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。
提⽰框–其他的⾃定义属性
提⽰框–JS设置参数⽅法
使⽤过JQuery UI应该知道，它⾥⾯有⼀个dialog的弹出框组件，功能也很丰富。与jQuery UI的dialog类似，Bootstrap⾥⾯也内置了弹出框组件。打开bootstrap ⽂档可以看到它的dialog是直接嵌⼊到bootstrap.js和bootstrap.css⾥⾯的，也就是说，只要我们引⼊了bootstrap的⽂件，就可以直接使⽤它的dialog组件，是不是很⽅便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使⽤。废话不多说，直接看来它如何使⽤吧。
弹出框（Popover）
不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提⽰框中是没有的。
样式⽂件：
☑ LESS版本：对应的源⽂件是 popovers.less
<button type="button" class="btn btn-default" id="myPopover">猛击我吧</button>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="maxcdn.bootstrapcdn/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"right"
});
});
</script>
弹出框–弹出框的结构
弹出框Popover和提⽰框tooltip相⽐，就多了⼀个content内容，那么在此使⽤ data-content 来定义弹出框中的内容。同样可以使⽤或者标签来制作，
调⽤popover的时候，options的参数与声明式选择⾥以data-开头的⾃定义属性⼀样。都可以在options⾥设置。
<button type="button"
data-toggle="popover"
class="btn btn-default"
id="myPopover">
⿏标放上显⽰弹出框
</button>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="maxcdn.bootstrapcdn/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
//通过js来定义弹出框
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top",
trigger:"hover"
});
});
</script>
弹出框–提⽰框和弹出框的异同
提⽰框 tooltip 的默认触发事件是 hover 和 focus，⽽弹出框 popover 是 click
提⽰框 tooltip 只有⼀个内容(title)，⽽弹出框不仅可以设置标题（title）还可以设置内容(content)
提⽰框tooltip的模板：
<div class="tooltip" role="tooltip">
jquery弹出div窗口<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>
弹出框popover的模板：
<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。