How to position a Bootstrap popover ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  <script src=
  </script>
  <script src=
  </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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>
    Example of Triggering Bootstrap
    Popover on Mouseover
  </title>
  
  <link rel="stylesheet" href=
  <script src=
  </script>
  <script src=
  </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>

chevron_right


Output:
 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.