USWDS - Tooltip: dynamic initialization

[mejiaj]

Summary

Tooltip initializes on first interaction. Tooltip now checks if it has been initialized before toggling. If it hasn't initialized properly then it will call a setup attributes function. Closes #4055.

Additional information

Component setup only occurred on document ready or when manually calling the on/off method on a specific element. This caused issues because:

1. Dynamically created components never initialized properly
2. Event listeners weren't attached properly

This PR does the following:

1. Init only scaffolds component e0a3cb4
2. Use behaviors to add event listeners that bubble eb4c4d0#diff-8d7e7a60d39759da3b847a457caf221ad9251a8e84ab2356905ac7e9ba36cf4cR372-R383
3. Scaffold component on first interaction (if it hasn't already  — helps with dynamically added components) 92d15e3
4. Exports methods users can hook into (gives users more control over functionality) 585d2b3
5. Updates JS entrypoint for Storybook  — avoids building JS every change, but still requires refresh

I've also removed the title attribute from tooltip trigger, instead of leaving it empty.

How to test

• Confirm tooltip still functions as expected
• Create a tooltip in JS (added mine via devtools console) and insert into DOM ★
• Confirm tooltip works as expected

★ Dynamic tooltip example

// Create trigger based on recommended markup from Tooltip page
const dynamicTooltip = document.createElement("button");

// Add attributes
dynamicTooltip.setAttribute("type", "button");
dynamicTooltip.setAttribute("data-position", "right");
dynamicTooltip.setAttribute("title", "A dynamic tooltip");
dynamicTooltip.classList.add("usa-button", "usa-tooltip");

// Let's give our tooltip trigger some text
dynamicTooltip.textContent = "My dynamic tooltip";

// Insert into DOM
document.body.appendChild(dynamicTooltip);

---

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[amyleadem]

Very cool fix! I was able to dynamically add a tooltip that scaffolds itself and works as expected. Additionally, the tooltip works as expected with both mouse and keyboard in Safari, Firefox, Chrome and with touch in iOS and VoiceOver Gestures.

[thisisdano]

Such a good improvement and a model for other components!

[jakerella]

❤️ THANK YOU!