Remove tooltip and popover styling as it is handled by Popper (#34627)

* Remove not needed css form tooltip & popover as it is made by popper
Remove tooltip margin variable, as popper needs margin to be zero

* Remove popover left/top initializers as they are handled by popper

* nullify `margin` variable and add deprecation message

* Document change in migration guide

* Update _variables.scss

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

4 files changed, 4 insertions, 7 deletions

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 3f1d980b21..d43f4b0e46 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -23,9 +23,6 @@
   --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
   // scss-docs-end popover-css-vars
 
-  position: absolute;
-  top: 0;
-  left: 0 #{"/* rtl:ignore */"};
   z-index: var(--#{$prefix}popover-zindex);
   display: block;
   max-width: var(--#{$prefix}popover-max-width);
@@ -42,7 +39,6 @@
   @include box-shadow(var(--#{$prefix}popover-box-shadow));
 
   .popover-arrow {
-    position: absolute;
     display: block;
     width: var(--#{$prefix}popover-arrow-width);
     height: var(--#{$prefix}popover-arrow-height);
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index a3343596b8..8f4718db89 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -17,10 +17,10 @@
   --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
   // scss-docs-end tooltip-css-vars
 
-  position: absolute;
   z-index: var(--#{$prefix}tooltip-zindex);
   display: block;
   margin: var(--#{$prefix}tooltip-margin);
+  @include deprecate("`$tooltip-margin`", "v5", "v5.x", );
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -32,7 +32,6 @@
   &.show { opacity: var(--#{$prefix}tooltip-opacity); }
 
   .tooltip-arrow {
-    position: absolute;
     display: block;
     width: var(--#{$prefix}tooltip-arrow-width);
     height: var(--#{$prefix}tooltip-arrow-height);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 85de06fc7a..6331246e10 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1294,7 +1294,7 @@ $tooltip-border-radius:             $border-radius !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
 $tooltip-padding-x:                 $spacer * .5 !default;
-$tooltip-margin:                    0 !default;
+$tooltip-margin:                    null !default; // TODO: remove this in v6
 
 $tooltip-arrow-width:               .8rem !default;
 $tooltip-arrow-height:              .4rem !default;
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
index ad29a33426..baba2dffab 100644
--- a/site/content/docs/5.1/migration.md
+++ b/site/content/docs/5.1/migration.md
@@ -118,6 +118,8 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa
 
 - **Added new snippet examples based to show how to customize our components. —** Pull ready to use customized components and other common design patterns with our new [Snippets examples]({{< docsref "/examples#snippets" >}}). Includes [footers]({{< docsref "/examples/footers/" >}}), [dropdowns]({{< docsref "/examples/dropdowns/" >}}), [list groups]({{< docsref "/examples/list-groups/" >}}), and [modals]({{< docsref "/examples/modals/" >}}).
 
+- **Removed unused positioning styles from popovers and tooltips** as these are handled solely by Popper.js. `$tooltip-margin` has been deprecated and set to `null` in the process.
+
 Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/)
 
 <hr class="my-5">