Preface

• 4.6

popover

Bootstrap pop-up （Popover） plug-in unit , Reference resources ：

• https://www.runoob.com/bootstrap/bootstrap-popover-plugin.html
• https://v3.bootcss.com/javascript/#popovers
• Source code ：https://www.cnblogs.com/xiaobie123/p/5997617.html
• https://www.tutorialspoint.com/bootstrap/bootstrap_popover_plugin.htm

Ruoyi (ruoyi) Use in popover Realization “ more ” Operation function .

Add click the blank space to close popover function

$("body").on("click", function() {
    
	//$(".popover").popover("hide");
	$('.table [data-toggle="popover"]').popover("hide");
});

• Click anywhere on the page , close （ hide ）popover.
• Ruoyi (ruoyi) Use in popover The default trigger method of is hover The way .

It can also be changed to ： Click the more button to pop up popover , Click the blank space to close popover function

1. popover The trigger mode of is changed to manual （ Manual ） The way

actions.push('<a class="btn btn-info btn-xs" role="button" data-container="body" data-placement="bottom" data-toggle="popover" data-html="true" data-trigger="manual" data-content="' + moreMenu + '">
	<i class="fa fa-chevron-circle-right"></i> more </a>');

• data-trigger="manual" ： Trigger mode is manual The way

2. Click the more button to pop up popover

$("#bootstrap-table").on("post-body.bs.table", function (e, args) {
    
	$('.table [data-toggle="popover"]').popover();
	$('.table [data-toggle="popover"]').click(function () {
    
		/* Close all popover*/
		$('.table [data-toggle="popover"]').popover("hide");
		/* Open the corresponding popover：toggle  Presentation display / Hide the pop-up box of the element , Switch hidden elements , Make it show */
		$(this).popover("toggle");
		
		/* No bubbling of events */
		var e = arguments.callee.caller.arguments[0] || event;
        e.stopPropagation();
	});
});
$("body").on("click", function() {
    
	$('.table [data-toggle="popover"]').popover("hide");
});

Improved writing ：

$("body").on("click", function() {
    
	$(".popover_open").popover("hide");
});
$("#bootstrap-table").on("post-body.bs.table", function (e, args) {
    
	$('.table [data-toggle="popover"]').popover()
		.on('show.bs.popover', function () {
    
			$(this).addClass("popover_open");/*  open  popover  when , Add an open tag  */
		}).on('hide.bs.popover', function () {
    
			$(this).removeClass("popover_open");/*  close  popover  when , Remove open tag  */
		});
	
	$('.table [data-toggle="popover"]').click(function () {
    
		/* Close all popover*/
		$('.table [data-toggle="popover"]').popover("hide");
		/* Open the corresponding popover：toggle  Presentation display / Hide the pop-up box of the element , Switch hidden elements , Make it show */
		$(this).popover("toggle");
		
		/* No bubbling of events */
		var e = arguments.callee.caller.arguments[0] || event;
        e.stopPropagation();
	});
});