USWDS - Tooltip: positioning fix #3963

[scottqueen-bixal]

USWDS - Tooltip: positioning fix

closes Tooltip positioning #3915

Description

• JS, not enough case logic to handle top and bottom fall back position. ie. if the content is not visible on top or bottom, it should allow for left or right positioning if possible
• Styles, the constrained class that gets added before the position update occurs is not strict enough, it shouldn't be able to have a width that is too small.

This work;

• improve the positioning logic by checking all available directions first, then compressing only if it does not fit on the screen
• updates .usa-tooltip_body--wrap to include a max-width to keep the pseudo-element from being too small for the content

Test Coverage

Because these updates require multiple/various calculations of "client" values, (ie. clientHeight, offsetWidth) they would be best covered with e2e web-based functional testing, rather than mocked through our current JSDOM driven unit tests. See this request for JSDom also reference Unimplemented parts of the web platform via JSDom documentation.

1. Navigate to : test/tooltip-utilities
   2a. Hover/tab over the "RSS" icon to display the tooltip, ensure that it is in line with the description across screen sizes
   2b. Hover/tab over the "Show on Right "<button> icon to display the tooltip, ensure that it is in line with the description across screen sizes

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.
  • currently failing a snyk test because of del ^6.0
• 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.

[mejiaj]

Great work and love the documentation!

[mejiaj]

@thisisdano should we update the base branch to 2.11.0?