Add new tooltip component to DS

[contolini]

We have two cf.gov apps that use tooltips but limited documentation on best practices or how to use them in new projects. This PR adds one implementation to the DS. It requires a third party library called Tippy.js.

It requires code in the following format:

Some sentence that requires additional clarity <span data-tooltip="relevant-tooltip">{% include 'icons/help-round.svg' %}</span>
<template id="relevant-tooltip">
    <div class="tippy-heading">Here's the tooltip heading</div>
    <div class="tippy-body">And the tooltip body</div>
</template>

Creating the CFPB theme requires augmenting the tippy-* classes. There's no CSS that's usable without the Tippy library so I didn't create an o-tooltip organism.

Testing

1. Visit the tooltip page at the PR preview website.

Screenshots

Notes

• It doesn't feel great adding Tippy.js to the main package.json when its code will be used on few pages.

Todos

• Add more documentation about usage and design guidelines.

Checklist

• PR has an informative and human-readable title
• Changes are limited to a single goal (no scope creep)
• Code can be automatically merged (no conflicts)
• Code follows the standards laid out in the CFPB development guidelines
• Passes all existing automated tests
• Any change in functionality is tested
• New functions are documented (with a description, list of inputs, and expected output)
• Placeholder code is flagged / future todos are captured in comments
• Visually tested in supported browsers and devices (see checklist below 👇)
• Project documentation has been updated
• Reviewers requested with the Reviewers tool ➡️

Testing checklist

Browsers

• Chrome on desktop
• Firefox
• Safari on macOS
• Edge
• Safari on iOS
• Chrome on Android

Accessibility

• Keyboard friendly
• Screen reader friendly

Other

• Is useable without CSS
• Is useable without JS
• Flexible from small to large screens
• No linting errors or warnings
• JavaScript tests are passing

[netlify]

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
🔨 Latest commit	aebb6be
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/66eaeba47c07c10008214155
😎 Deploy Preview	https://deploy-preview-2054--cfpb-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jenn-franklin]

Amazing.

Proposing some tweaks to the content:

Intro
A tooltip provides short, descriptive information when a user hovers or focuses on an element. It contains helpful but non-critical information and is useful in a space-constrained user interface.

Guidelines
Be judicious in using tooltips and explore other design options that keep content visible before choosing to use a tooltip. Only consider using a tooltip for short, non-critical information in a space-constrained user interface. Because a tooltip is hidden until activated, ensure content within a tooltip is not essential for completing a task on the page. For more guidance, see the USWDS tooltip page.

Behavior

• Activate a tooltip by hovering or focusing on a help (question mark) icon situated next to text.
• Press the escape key to dismiss open tooltips.
• When a tooltip is at the edge of the user’s viewport, it should automatically reorient itself away from the edge of the screen to prevent content clipping.

Accessibility
As USWDS states, tooltips are progressive enhancements for the title attribute and will display as the title attribute if the component doesn’t initialize. When testing tooltips for accessibility, ensure they are compliant with USWDS tooltip accessibility tests.