Bootstrap——提示框、提示冒泡

一、提示框

1.基本

<div class="row mt-5">
	<div class="col">
		<button class="btn btn-danger" data-toggle="popover" title="这里放的是提示框的标题" data-content="这里放的是提示框的内容">提示框</button>
	</div>
</div>
<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="popover"]').popover();
	});
</script>

2.方向

<button class="btn btn-secondary" data-toggle="popover" title="这个提示框没有标题，并且是在上面显示" data-placement="top">上面显示提示框</button>
<button class="btn btn-info" data-toggle="popover" title="这个提示框没有标题，并且是在右侧显示" data-placement="right">右侧显示提示框</button>
<button class="btn btn-primary" data-toggle="popover" title="这个提示框没有标题，并且是在下面显示" data-placement="bottom">下面显示提示框</button>
<button class="btn btn-warning" data-toggle="popover" title="这个提示框没有标题，并且是在左侧显示" data-placement="left">左侧显示提示框</button>

3.禁用元素弹出提示框

相当于冒泡提示

	<span class="d-inline-block" data-toggle="popover" data-trigger="hover" data-content="禁用的元素想要弹出提示框，需要在外面添加一层，把交互的功能都加到这个层上">
		<button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按钮弹出提示框</button>
	</span>

4.焦点失去

点击其他地方等操作使按钮失去焦点提示会消失

<button class="btn btn-dark" data-toggle="popover" title="这个提示框当焦点失去的时候就会隐藏" data-trigger="focus">失去焦点隐藏</button>

5.data属性

<div class="col">
	<button class="btn btn-success" data-toggle="popover" title="这是<b>标题<b>" data-content="这是内容"
		data-animation="true"//动画过渡
		data-container='body'//信息在在哪个dom中展示
		data-delay='{ "show": 1000, "hide": 2000 }'
		data-html='true'//显示代码
		data-placement='top'//方向
		data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
		data-trigger='hover'//触发方式
		data-offset='120'//偏移
	>data-属性</button>
</div>

6.方法与事件

<div class="col">
	<button class="btn btn-info" title="方法与事件" id="myPopover">方法与事件</button>
</div>
<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="popover"]').popover();
	});
	//方法
	//$('#myPopover').popover('show');	//显示提示框
	/* setTimeout(function(){
		$('#myPopover').popover('hide');	//隐藏提示框
	},1000); */
	/* $('#myPopover').popover('hide');
	$('#myPopover').popover('toggle');	//切换提示框 */
	//$('#myPopover').popover('enable');	//添加提示框功能
	$('#myPopover').popover('disable');	//取消提示框功能
	$('#myPopover').popover('toggleEnabled')	//切换（enable与disable的功能）
	//事件
	$('#myPopover').on('show.bs.popover',function(){
		console.log('提示框要显示了');
	});
	$('#myPopover').on('shown.bs.popover',function(){
		console.log('提示框已经完全显示了');
	});
	$('#myPopover').on('hide.bs.popover',function(){
		console.log('提示框要隐藏了');
	});
	$('#myPopover').on('hidden.bs.popover',function(){
		console.log('提示框已经完全隐藏了');
	});
	$('#myPopover').on('inserted.bs.popover',function(){
		console.log('提示框DOM已经插入到页面里了');
	});
</script>

二、提示冒泡

1.基础

<div class="row mt-5">
	<div class="col">
		<button class="btn btn-secondary" data-toggle="tooltip" title="这个提示工具在上面显示" data-placement="top">上面弹出提示工具</button>
	</div>
</div>
<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="tooltip"]').tooltip();
	});
</script>

2.方向

<button class="btn btn-secondary" data-toggle="tooltip" title="这个提示工具在上面显示" data-placement="top">上面弹出提示工具</button>
<button class="btn btn-info" data-toggle="tooltip" title="这个提示工具在右侧显示" data-placement="right">右侧弹出提示工具</button>
<button class="btn btn-primary" data-toggle="tooltip" title="这个提示工具在下面显示" data-placement="bottom">下面弹出提示工具</button>
<button class="btn btn-warning" data-toggle="tooltip" title="这个提示工具在左侧显示" data-placement="left">左侧弹出提示工具</button>

3.禁用

<div class="col">
	<span class="d-inline-block" data-toggle="tooltip" title="禁用的元素弹出提示工具，需要在外面添加一个层，把交互的功能添加到这个层上">
		<button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按钮弹出提示工具</button>
	</span>
</div>

4.data属性

<div class="col">
	<button class="btn btn-success" data-toggle="tooltip" title="这是<em>标题</em>"
		data-animation='true'
		data-container='body'
		data-delay='{ "show": 1000, "hide": 2000 }'
		data-html="true"
	>data-属性</button>
</div>

5.方法与事件

<div class="col">
	<button class="btn btn-info" title="方法与事件" id="myTooltip">方法与事件</button>
</div>
<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="tooltip"]').tooltip();
	});
	//方法
	/* $('#myTooltip').tooltip('show');	//显示提示框
	setTimeout(function(){
		$('#myTooltip').tooltip('hide');	//隐藏提示框
	},1000); */

	/* $('#myTooltip').tooltip('hide');
	$('#myTooltip').tooltip('toggle');	//切换提示框 */
	$('#myTooltip').tooltip('enable');	//添加提示框功能
	$('#myTooltip').tooltip('disable');	//取消提示框功能
	$('#myTooltip').tooltip('toggleEnabled')	//切换（enable与disable的功能）
	//事件
	$('#myTooltip').on('show.bs.tooltip',function(){
		console.log('提示工具要显示了');
	});
	$('#myTooltip').on('shown.bs.tooltip',function(){
		console.log('提示工具已经完全显示了');
	});
	$('#myTooltip').on('hide.bs.tooltip',function(){
		console.log('提示工具要隐藏了');
	});
	$('#myTooltip').on('hidden.bs.tooltip',function(){
		console.log('提示工具已经完全隐藏了');
	});
	$('#myTooltip').on('inserted.bs.tooltip',function(){
		console.log('提示工具DOM已经插入到页面里了');
	});
</script>