Mariamawit guide infobox 1590

[mmogesdesigns]

• Fixes Bug: Tooltips for Sidebar question icon are broken #1590

What changes did you make?

• Updated the tooltip functionality to work with React Tooltip v5.
• Replaced outdated data-tip and data-for attributes with data-tooltip-id and data-tooltip-content as per v5 requirements.
• Integrated the component directly into the EarnedPointsProgress and SidebarProjectLevel components.
• Adjusted the tooltip hover functionality so it triggers properly.
• Preserved the existing structure of the components while ensuring tooltip integration is consistent.

Why did you make the changes (we will use this info to test)?

• React Tooltip was updated to v5, which caused the previous implementation (using v4 props and attributes) to break. These changes ensure the tooltips work as expected.
• Tooltips now display the correct dynamic content from the component’s logic when hovering over the green circle or related elements.
• The updated functionality aligns with the React Tooltip v5 API, preventing future compatibility issues.

Issue-Specific User Account

If you registered a new, temporary TDM User Account for this issue, indicate the
username (i.e., email address) for the account.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

The tooltip hover functionality now works as expected, but aligning the tooltip’s CSS positioning to match the original design is still a challenge. The tooltip’s place and offset props have been used to adjust positioning, but the desired alignment is not yet achieved. Additional CSS adjustments or a review of the tooltip’s parent container styles may be necessary to address this fully. It might be worth creating a new issue specifically for tooltip alignment and positioning if needed.

Visuals after changes are applied

[entrotech]

In the time that Miriamwit was wworking on this issue, the Designers created Issue #1997, which changed the styling and functionality of the tooltips for the Sidebar and the Target Points page such that the tooltips now need to have a close box on them. This required replacing the react-tooltlip library that Miriam just upgraded with the reactjs-popup library, to allow for the close box. This also required revisiting how the styling is done to comply with Issue #1997. While doing this, I also made the same changes to the broken "popovers" on the Target Points page as part of the adjustments to this PR.