Post
Ask Question

How To Implement Bootstrap 4 Popover

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.

  1. 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!
  2. Popovers require the tooltip plugin as a dependency.
  3. If you’re building our JavaScript from source, it requires util.js.
  4. Popovers are opt-in for performance reasons, so you must initialize them yourself.
  5. Zero-length title and content values will never show a popover.
  6. Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc.).
  7. Triggering popovers on hidden elements will not work.
  8. Popovers for .disabled or disabled elements must be triggered on a wrapper element.
  9. 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.
  10. 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 a full-stack developer.">What is your name?</a>     
    </div>  
</body>  
</html>

Output

Bootstrap

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 the top, bottom, left, or 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

Popover 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

Implement Bootstrap

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

header


Similar Articles