Tooltip with long text cuts off when hovering over wins icons

[macho-catt]

Overview

We have to fix a visual bug on the wins page to present information accurately and maintain site professionalism.

Details

On the wins page, when hovering over one of the wins icons, the tooltip cuts off if the text is two lines long.

Click for example

Action Items

• Identify what's causing the visual bug, and fix it
  • Ideally, if the line is two lines (or more) long, the tooltip shouldn't cut off with the wins cards. The tooltip should be viewed in full
• Ensure that the fix does not break other features on the wins page

Resources/Instructions

Wins Page
Wins HTML
Wins JS
Wins CSS

[github-actions]

Hi @macho-catt.

Good job adding the required labels to this issue.

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[JimGeist]

Progress: Issue was investigated Monday night. Best fix was to change the sass settings so the bubble appears above the icons instead of below. Work was tested locally first with making changes in inspector. Changes were finalized and a pull request was made on Dec. 16, 2021.
Blockers: Conceptual first because I tried to dynamically determine the top position of the bubble using transforms. Then I realized the bottom is always the same amount above the icon.
Availability: The goal was to get it done in the week. Time in the beginning of the week was very limited.
ETA: Issue was completed Thurs. Dec. 16, 2021.
Pictures:

[SAUMILDHANKAR]

We missed looking at the changes in responsive design mode which has some errors, so reopening this issue.

[JimGeist]

Issue was revisited, fixed, and tested with desktop browser window > 960px width; desktop browser window width < 960px; responsive tablet, ipad, ipad pro and mobile phone sizes.

The display problem that caused the re-opening of the issue was addressed. When the window is not wide enough for the modal window, the WINS card is expanded to show all the WINS and text when one of the badges are clicked. The card still had the bottom: 50px; setting which caused a misalignment of the WINS badge descriptions.

[ExperimentsInHonesty]

@JimGeist We are going to close the PR you made. I am sorry we were not clearer that we expected the tool tip to simply lay on top of the other assets, instead of trying to fit inside the card, which led you to think that you needed to come up with a novel solution about where to place it (which was a change that was not desired). This is a good lesson for us to be more detailed, or to provide design mockups and for you to get clarification on a design change before you start coding.

[ExperimentsInHonesty]

@JimGeist Tomas indicated you had a person reason for having to jump off this ticket. I have unassigned you to spare your inbox from future work on it.