Why does this popover appear below the button when the code instruction is for right placement?

Question

Why does this popover ONLY appear below the button when the code instruction is for right placement? The next few sentences are only to "add more details" for question to go through.

new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

$(document).ready(function() {
  $(".name-button").click(function(event) {
    $('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
  });
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<!--Modal Trigger Buttons -->
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>

<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>

<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>


<!-- The Modal Itself  -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-lg btn-danger example-popover" **data-bs-placement="right" ** data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

isherwood · Accepted Answer · 2021-05-14T20:11:29.660

Because you haven't left room in your layout for right side placement. The Popper library attempts to use your preference, and if it doesn't fit it goes elsewhere per the algorithm in the library so the user can actually see it.

Here I've moved your button to a better place and it works as expected. Note that you can specify a fallback position yourself with the fallbackPlacement property. Read more

new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

$(document).ready(function() {
  $(".name-button").click(function(event) {
    $('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
  });
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

<button type="button" class="btn btn-lg btn-danger example-popover" **data-bs-placement="right" ** data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<!--Modal Trigger Buttons -->
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>

<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>

<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>

<!-- The Modal Itself  -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Why does this popover appear below the button when the code instruction is for right placement?

1 Answers1