Summary
This PR starts the process of migrating tooltips and popovers to use CSS variables. In doing so, I've deprecated three Sass variables in an effort to improve customization via CSS variables. See _variables.scss
for the changes there.
Beyond that, this replaces the bulk of our Sass for tooltips and popovers with customizable CSS variables. Most are reassigned from the Sass variables and respect the same name, but as mentioned above, some deviation was required for a more sensible future friendly path.
Originally I expected tooltips and popovers to be a clusterfuck to customize, but thanks to the customClass
option we recently added, this is basically a breeze. I've added the data attributes, wrote some basic styles, and added some lovely docs to explain and demonstrate the situation for folks.
Fixes #34221 (closed).
Preview
- Tooltips: https://deploy-preview-34622--twbs-bootstrap.netlify.app/docs/5.1/components/tooltips/#custom-tooltips
- Popovers: https://deploy-preview-34622--twbs-bootstrap.netlify.app/docs/5.1/components/popovers/#custom-popovers
Todos
-
Document deprecations maybe in the Migration guide? -
Confirm all CSS vars are properly being used ( fusv
doesn't do that for us) -
Adjust bundlewatch