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>

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 3f1d980b21c768f283724c4112380b52e7356ebf..d43f4b0e46aff78a0764bf533d82d1861645e16d 100644 (file)
--- 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 a3343596b8684dc8d0d08a52fea848c8298c4799..8f4718db89da9bbecf8d6c9d8369ad59c556e2d0 100644 (file)
--- 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 85de06fc7a9bc9447fbe43be3656c7acd0f9d98b..6331246e1078d3315cc305c4ee9b877b687c45c7 100644 (file)
--- 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 ad29a334264128aeffc3de527a03c0ac2c6ad8ae..baba2dffab562d244d5c073e898cc7fe29d034c9 100644 (file)
--- 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">