English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Pop-up box

The pop-up box control is similar to the tooltip, which is displayed after the mouse clicks on the element. Unlike the tooltip, it can display more content.

How to create pop-up boxes

By adding data to the element-toggle="popover" Create pop-up boxes.

The content of the 'title' attribute is the title of the pop-up box, data-The 'content' attribute displays the text content of the pop-up box:

<a href="#" data-toggle="popover" title="Pop-up box title" data-content="Pop-up box content">Click me multiple times</a>

Note: Pop-up boxes should be written in jQuery initialization code: then call the popover() method on the specified element.

The following examples can be used anywhere in the document to display pop-up boxes:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Popover Example</h2>
　　<a href="#" data-toggle="popover" title="Pop-up box title" data-content="Pop-up box content">Click me multiple times</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Test See ‹/›

Specify the position of the pop-up box

By default, the pop-up box is displayed on the right side of the element.

You can use 'data'-The 'placement' attribute is used to set the direction of the pop-up box display: top, bottom, left, or right:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Popover Example</h2>　<br><br><br><br><br><br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="top" data-content="Content">Click me</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="bottom" data-content="Content">Click me</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="left" data-content="Content">Click me</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="right" data-content="Content">Click me</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Test See ‹/›

Button usage:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Popover Example</h2>　<br><br><br><br><br><br>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
	　　Popover on top
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
	　　Popover on right
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="bottom" data-content="Vivamus
	sagittis lacus vel augue laoreet rutrum faucibus."
	　　Popover on bottom
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
	　　Popover on left
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Test See ‹/›

Close the popup

By default, the popup closes after clicking the specified element again, you can use data-trigger="focus" property to set the popup to close when clicking outside the element area:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Popover Example</h2>　<br>
　　<a href="#" title="Cancel the popup" data-toggle="popover"　data-trigger="focus" data-content="Click anywhere else in the document to close me">Click me</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Test See ‹/›

Tip:If you want to implement the effect of showing and hiding the element when the mouse moves over it, you can use data-trigger property, and set the value to "hover":

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Popover Example</h2>　<br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-trigger="hover"　data-content="Some content">Hover over me</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Test See ‹/›
Bootstrap4 ScrollspyBootstrap4 Alert Box