USWDS - Tooltip: Add opacity:0 to initial state

[amyleadem]

Summary

Restored the opacity: 0 style rule to the tooltip body's initial state. This prevents the component from flickering if its position needs to be recalculated.

Breaking change

This is not a breaking change.

Related issue

Closes #4458

Related pull requests

Changelog PR

Preview link

Tooltip component

Problem statement

To prevent flickering in the tooltip component, the tooltip is programmed to receive an opacity shift slightly after the tooltip positioning is set. This comment explains that the initial state should be set to opacity: 0 so that any position changes will occur when the component is visibly hidden.

However, the tooltip does not receive an initial style of 0 opacity, which can result in flickering.

It looks like this CSS declaration used to exist, but was possibly removed by mistake when refactoring how the tooltip positioning works (see the code changes in this PR).

Solution

Reinstating the initial opacity: 0 style rule should allow the is-visible class to perform as expected and prevent flickering in the tooltip.

Testing and review

• Open the tooltip component and confirm that the tooltip toggles visibility as expected.
• Confirm that toggling the is-visible class in web inspector shows and hides the component as expected.

[mahoneycm]

Code is working great!

I had to add the class is-set in addition to is-visible while testing the class additions, but hover toggling worked as expected!

[mejiaj]

LGTM, just a minor note on documenting why we need the style rule.

[thisisdano]

Simple and effective!