How to position a Bootstrap popover ?

Last Updated : 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> 