Convert tooltips and popovers to CSS vars

[mdo]

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.

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

[mdo]

@ffoodd Would love your eyes on this, #34443, and #34443. In particular, I'm unsure how we should setup the font-size values while still supporting RFS. Rest of this is feeling good to me though!

[ffoodd]

Regarding font-sizes and RFS, I don't see any other option if we want to use RFS.

Note: regarding my suggestion PR using fallback values, we might check that value is above $rfs-base-value: if so, define var()'s fallback value, else use rfs() as you currently do. Not sure the extra effort is needed though.

[mdo]

Updated this PR to also split the padding values for tooltips, popover headers, and popover bodies.

[ffoodd]

A single question regarding browser support, but looks great already :)

Out of date, changes addressed