Bootstrap 5.2 - popover doesn't include the proper placement class

[blaskognia]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When I use the JS code with parameter PLACEMENT, popover should use placement that i declare. Thats not happend. Bootstrap popover still use AUTO.

Reduced test cases

In Bootstrap 5.1.3 work fine - this is new bug.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2

[mdo]

Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and operating system details.

---

This is a saved reply.

[blaskognia]

Live copy is here: https://codepen.io/szymon-koronkiewicz/pen/zYRdpPK

Click on test text. Popover will show. Then check source (right click on popover - option CHECK ELEMENT). Popover should have class bs-popover-bottom, but have class bs-popover-auto.

As I said before, in 5.1.3 version of bootstrap this works fine.

[mdo]

/cc @GeoSot

[Supportic]

If popper.js has not enough space for the popover, it will fallback to any case which is feasable in the current situation.
It considers first your fallbacks in options but if even those are not possible it will choose automatically.

Set the following css:

body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

and adjust js, then it should work

var options = {
  placement: "right", // here
  fallbackPlacements: ["bottom"],
  html: true,
  content: "test text"
};
$(document).ready(function () {
  new bootstrap.Popover($(".testpopover"), options)
});

[blaskognia]

If popper.js has not enough space for the popover, it will fallback to any case which is feasable in the current situation. It considers first your fallbacks in options but if even those are not possible it will choose automatically.

Set the following css:

body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

and adjust js, then it should work

var options = {
  placement: "right", // here
  fallbackPlacements: ["bottom"],
  html: true,
  content: "test text"
};
$(document).ready(function () {
  new bootstrap.Popover($(".testpopover"), options)
});

This is not a problem. Problem is that class name should change.

[GeoSot]

This is not a problem. Problem is that class name should change.

Hello @blaskognia , can you provide me a link in bootstrap docs which verifies the above statement?

Just for note, I've changed the issue title as it was misleading