TCCP: Add tooltip with purchase APR context

[chosak]

To test, run a local server and visit http://localhost:8000/consumer-tools/credit-cards/explore-cards/cards/. Mouseover the question mark icon.

This implementation works without JavaScript but needs work for mobile. Placement also needs to be moved above the icon per latest design.

Screenshots

Checklist

• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • Consider prefixing, e.g., "Mega Menu: fix layout bug", or "Docs: Update Docker installation instructions".
• Changes are limited to a single goal (no scope creep)
• Code follows the standards laid out in the CFPB development guidelines
• Future todos are captured in comments and/or tickets
• Project documentation has been updated, potentially one or more of:
  • This repo’s docs (edit the files in the /docs folder) – for basic, close-to-the-code docs on working with this repo
  • CFGOV/platform wiki on GHE – for internal CFPB developer guidance
  • CFPB/hubcap wiki on GHE – for internal CFPB design and content guidance

Front-end testing

Browser testing

Check the current browser support cutoff list](https://cfpb.github.io/consumerfinance.gov/browser-support#current-browser-support-metrics) for browsers that are advisable
to prioritize for testing.

Accessibility

• Keyboard friendly (navigable with tab, space, enter, arrow keys, etc.)
• Screen reader friendly
• Does not introduce new errors or warnings in WAVE

Other

• Is useable without CSS
• Is useable without JS
• Does not introduce new lint warnings
• Flexible from small to large screens

[caheberer]

I realize that my original mock-up was using the black with reversed type, but I was thinking we'd follow the style Grad path developed so that we were consistent. Which is gray-5 background with gray-40 border.

[chosak]

@caheberer colors updated in latest commit:

[caheberer]

Thanks for the colors update!

Other design tweaks for @contolini

• Add 15px spacing between header and body
• Add caret

Do we want to expand the width of this so that it takes up less vertical space? I was using two columns (full width on mobile). It doesn't save that much room, so if there's a reason it's this size that's okay too.

[contolini]

@caheberer here's the latest updates that I added to this PR. LMK if you want me to reduce the outer padding.

dates	eligibility

[contolini]

Merging in preparation for user testing. Further improvements TBD.

[caheberer]

Looks good to me! One tiny thing that doesn't need to happen before testing—could we add a line break before the date range on mobile?

[contolini]

@caheberer Yeah most def