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/)