How to position a Bootstrap popover ?

22 Jun, 2020
This article describes how a popover can be positioned on the page. The popover attribute of Bootstrap can be used to make the website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element. It is similar to the Bootstrap Tooltip. However, a popover can contain much more content than a tooltip.
Popovers is the third-party library Popper.js for positioning the element. The library popper.min.js must be included before bootstrap.js
Syntax:
$(function () {
  $('[data-toggle="popover"]').popover()
})

Positioning can be sometimes very important as per need but the user needs to do it explicitly as Popover by default will appear on the right side of the element. 
Example 1: The below code is a basic implementation in HTML, Bootstrap, and JavaScript. All 4 directions (left, right, up and down) popover has been implemented using the data-placement settings. 
html
<!DOCTYPE html><html>  <head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content=    "width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">  </script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head>  <body style="text-align:center;">  <div class="container">    <h3>Popover Example</h3>    <hr>    <ul class="list-inline">      <li>        <!-- Popover positioned to the top -->        <a href="#" title="Header"           data-toggle="popover"           data-placement="top"           data-content="Content">          Top        </a>      </li>      <br>      <li>        <!-- Popover positioned to the left -->        <a href="#" title="Header"           data-toggle="popover"           data-placement="left"           data-content="Content">          Left        </a>      </li>      <br>      <li>        <!-- Popover positioned to the right -->        <a href="#" title="Header"           data-toggle="popover"           data-placement="right"           data-content="Content">          Right        </a>      </li>      <br>      <li>        <!-- Popover positioned to the bottom -->        <a href="#" title="Header"           data-toggle="popover"           data-placement="bottom"           data-content="Content">          Bottom        </a>      </li>    </ul>  </div>  <script>    // Enable all popovers in the document    $(document).ready(function () {      $('[data-toggle="popover"]').popover();    });  </script></body>  </html>
Output: 
Example 2: The below example is a top hover popover where the popover triggers up when the cursor points to the button and disappears when the cursor is removed from the button.
html
<!DOCTYPE html><html lang="en">  <head>  <title>    Example of Triggering Bootstrap    Popover on Mouseover  </title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script>    <script>    $(document).ready(function () {      $('[data-toggle="popover"]').popover({          // Set the placement of         // the popup to the top        placement: 'top',        trigger: 'hover'      });    });  </script>    <style>    .pop {      margin: 150px 50px;    }  </style></head>  <body>  <h3>    Bootstrap Popover  </h3>  <hr>  <div class="pop">    <button type="button"       class="btn btn-primary"       data-toggle="popover"       title="Title"       data-content="Geeks for Geeks">      Popover-1    </button>    <button type="button"       class="btn btn-success"       data-toggle="popover"       title="Title"       data-content="Geeks for Geeks">      Popover-2    </button>    <button type="button"       class="btn btn-info"       data-toggle="popover"       title="Title"       data-content="Geeks for Geeks |      A computer science portal for geeks.">      Popover-3    </button>    <button type="button"       class="btn btn-warning"       data-toggle="popover" title="Title"       data-content="Geeks for Geeks">      Popover-4    </button>  </div></body>  </html>
Output: 
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property