学习使用Bootstrap弹出框Popover提示框样式

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/120157585

本文详细介绍了Bootstrap的Popover提示框组件的使用，包括弹出方向、失去焦点隐藏、禁用元素提示及data属性的设置。强调了初始化提示框的重要性，以及在不同场景下的应用方法和事件监听。同时提供了多个示例代码，帮助开发者理解和实现各种提示框效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习使用Bootstrap弹出框Popover提示框样式

注意事项

popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，或者使用bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）。
popover提示框组件依赖于 tooltips提示冒泡插件提供状态提示框。
如果你要自行编译JS，请 href=“https://getbootstrap.net/docs/components/docs/javascript.html#util”>包括 util.js脚本文件。
由于性能原因，popover提示框组件是可选的，所以你必须自己将它们初始化才能启动生效。
零长度的 title 和 content 不会显示为一个弹出提示框。
指定 container: 'body'定义，以避免在更复杂的组件（如输入框组、按钮组等）中产生呈现问题。在隐藏元素上触发弹出提示框是无效（不起作用）的。
.disabled 或 disabled 元素的弹出提示框触发点击按钮，必须在在外层父元素上。
如果从一个跨多行的链接上触发提示冒泡，提示冒泡将居中。在<a>上使用white-space: nowrap;可以避免这种情况。
必须先隐藏弹出提示框，然后才能从DOM中删除相应的元素（以完成弹出关闭完整行为）。

弹出方向

<div class="container">
	<div class="row mt-5">
		<div class="col">
			<!-- 4个弹出方向 -->
			<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>
		</div>
	</div>
</div>

<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="popover"]').popover();
	});
</script>

失去焦点隐藏

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

<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="popover"]').popover();
	});
</script>

禁用元素弹出提示框

具有disabled属性的元素不是交互式的这意味着用户不能悬停或点击它们来触发弹出窗口（或工具提示）。作为一种解决方法，您需要从包装器<div>or<span>中触发弹出窗口，并覆盖disabled元素上的指针事件。

对于禁用的弹出式触发器，可以使用data-trigger="hover"来弹出窗口。

<div class="container">
	<div class="row mt-5">
		<div class="col">			
			<!-- 禁用元素弹出提示框 -->
			<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>
		</div>
	</div>
</div>

<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="popover"]').popover();
	});
</script>

data属性详解

可通过数据属性或JavaScript传递选项参数。对于数据属性，请将选项名称附加到data-上，如data-animation=""。

在这里插入图片描述

<div class="container">
	<div id="box"></div>

	<div class="row mt-5">
		<div class="col">
			<button class="btn btn-success" data-toggle="popover" title="这是<b>标题<b>" data-content="这是内容"
				data-animation="true"
				data-container='body'
				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>
	</div>
</div>

<script>
	//初始化提示框，必需要写这一步
	$(function(){
		$('[data-toggle="popover"]').popover();
	});
</script>

js方法与事件

方法：

.popover(‘show’)：显示提示框
.popover(‘hide’)：隐藏提示框
.popover(‘toggle’)：切换提示框
.popover(‘disable’)：取消提示框功能
.popover(‘toggleEnabled’)：切换提示窗口的显示或隐藏功能
.popover(‘enable’)：添加提示框功能

事件：

show.bs.popover：le data-draft-node=“block” data-draft-type=“table” data-size=“normal” data-row-style=“normal”>
shown.bs.popover：当提示框显示时，会触发此事件（待CSS转换过渡完成）。
hide.bs.popover：当调用hide实例方法时，此事件立即触发。 1. hidden.bs.popover：当提示框隐藏后，会触发此事件（待CSS转换过渡完成）。
inserted.bs.popover：当提示框对用户来说最终完成隐藏时（需要等待CSS转换过渡完成），会触发该事件。当事件弹出模板被添加到DOM时，show.bs.popover事件被触发。

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap的popover提示框样式</title>
</head>

<body>
	<div class="container">
		<!-- 方法与事件 -->
		<div class="col">
			<button class="btn btn-info" title="方法与事件" id="myPopover">方法与事件</button>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
	</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
	</script>

	<script>
		//方法
		//$('#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>
</body>

</html>