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: