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	e7a442b
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/67290d4f1946f800083f0131
😎 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.

[contolini]

@anselmbradford after trying a handful of techniques to conditionally load the tooltip third-party dependency only when a tooltip is used, I ultimately decided to not bundle the tooltip code with the rest of the DS and instead added it as a separate entrypoint using the exports field. This allows developers to selectively add tooltips to their project by importing @cfpb/cfpb-design-system/tooltips. I added a note to the variation code snippet with usage instructions.

[anselmbradford]

When resolving conflicts, you'll want to delete the npm-packages-offline-cache folder.

[anselmbradford]

Should we have a cursor change on hover?

[anselmbradford]

If JS is off, it seems like the (?) icons should be hidden.

[contolini]

Should we have a cursor change on hover?

I say no because a pointer cursor indicates something will happen on click (and nothing does in our case).

If JS is off, it seems like the (?) icons should be hidden.

I originally didn't do this because I figured there are scenarios where a user might want some words in the middle of a sentence to trigger a tooltip and it'd be bad if those words disappeared when JS is disabled. But our guidance explicitly states that help icons should trigger them so I'll add this feature and include a note about it in the guidance section.

[anselmbradford]

I say no because a pointer cursor indicates something will happen on click (and nothing does in our case).

If you're hovered on the (?), the tooltip shows. If you then click the (?), the tooltip is dismissed—so that's the action I was thinking the cursor change would indicate.

If not a cursor change, should there be a hover change on roll over? Or is that too button like? I noticed https://designsystem.digital.gov/components/tooltip/ has both a hover color change and a cursor change, but they also show the tooltip on buttons, so I'm unclear if that's completely covered by the buttons themselves, or if some of that is for the tooltip. Maybe @jenn-franklin can tell us how it should be and that's that.

[jenn-franklin]

👍 to a cursor change + click to close. No hover change. Thanks for calling this out!

[anselmbradford]

Just in case you missed it—npm-packages-offline-cache still needs to be deleted.