Introduction
This article demonstrates Bootstrap 4 Popover. The Popover component is similar to tooltips. It is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. To create a popover, add the data-toggle="popover" attribute to an element. Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover's body.
Important points you need to remember before using Bootstrap 4 popover
- Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.which contains Popper.js in order for popovers to work!
- Popovers require the tooltip plugin as a dependency.
- If you’re building our JavaScript from source, it requires util.js.
- Popovers are opt-in for performance reasons, so you must initialize them yourself.
- Zero-length title and content values will never show a popover.
- Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc.).
- Triggering popovers on hidden elements will not work.
- Popovers for .disabled or disabled elements must be triggered on a wrapper element.
- When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use white-space: nowrap; on your <a>s to avoid this behavior.
- Popovers must be hidden before their corresponding elements have been removed from the DOM.
Enable via data-* Attributes
The data-toggle="popover" activates the popover.
The title attribute specifies the header text of the popover.
The data-content attribute specifies the text that should be displayed inside the popover's body.
Note
Popovers must be initialized with jQuery: select the specified element and call the popover() method.
The following code will enable all popovers in the document,
- <script type="text/javascript">
- $(document).ready(function () {
- $('[data-toggle="popover"]').popover();
- });
- </script>
To use a Bootstrap 4 popover in your project, you need to have the following downloaded or cdn link scripts.
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Example for Bootstrap 4 Popover
- <!DOCTYPE html>
- <html>
- <head>
- <title>Popover</title>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('[data-toggle="popover"]').popover();
- });
- </script>
- </head>
- <body>
- <div class="container py-5">
- <h4 class="text-center text-uppercase">Bootstrap 4 Popover </h4>
- <br />
- <a href="#" data-toggle="popover" title="Introduction" data-content="My name is Farhan Ahmed. I am full-stack developer." >What is your name?</a>
- </div>
- </body>
- </html>
Output
Popover Positioning
By default, the popover will appear on the right side of the element.
Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element,
Example for Bootstrap 4 Popover Positioning
- <!DOCTYPE html>
- <html>
- <head>
- <title>Popover</title>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('[data-toggle="popover"]').popover();
- });
- </script>
- </head>
- <body>
- <div class="container py-5">
- <h4 class="text-center text-uppercase">Bootstrap 4 Popover Positioning </h4>
- <div class="row py-5">
- <div class="col-md-3">
- <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a>
- </div>
- <div class="col-md-3">
- <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a>
- </div>
- <div class="col-md-3">
- <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a>
- </div>
- <div class="col-md-3">
- <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a>
- </div>
- </div>
- </div>
- </body>
- </html>
Output
Closing Popovers
By default, the popover is closed when you click on the element again. However, you can use the
data-trigger="focus" attribute which will close the popover when clicking outside the element.
Example of closing popover
- <!DOCTYPE html>
- <html>
- <head>
- <title>Popover</title>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('[data-toggle="popover"]').popover();
- });
- </script>
- </head>
- <body>
- <div class="container py-5">
- <h4 class="text-center text-uppercase">Bootstrap 4 Popover Closing </h4>
- <br />
- <a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
- </div>
- </body>
- </html>
Output
If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of "hover".
Example for mouse hover popover
- <!DOCTYPE html>
- <html>
- <head>
- <title>Popover</title>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('[data-toggle="popover"]').popover();
- });
- </script>
- </head>
- <body>
- <div class="container py-5">
- <h4 class="text-center text-uppercase">Bootstrap 4 Popover Closing </h4>
- <br />
- <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="I am mouse hover popover">Hover over me</a>
- </div>
- </body>
- </html>
Output