Bug: Tooltips for Sidebar question icon are broken

[entrotech]

Overview

The (green?) circles with question mark icons should display tooltips when they are hovered over. This is broken in the development environment. There are similar icons on the Target Points Page (Page3) that also need to be fixed.

Action Items

• [ ] Fix. Most likely some code is just "disconnected" somewhere. Below is a screenshot from production, where it still works.
• [ ] Update this slide
• [ ] Review with product and dev. Update if needed based on feedback
• [ ] Once finalized, add before and after images to the [staging deck on this slide]()
  • [ ] if no slide has been made, make one in the staging deck
• [ ] Get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources/Instructions

[developerHet]

I would like to work on this issue. Can it be assigned to me?

[developerHet]

@entrotech I cannot find .env values, can you help me?

[entrotech]

Hi @developerHet . This is a project of Hack for LA. If you want to work on any of our projects, you will need to go through the volunteer onboarding process. The instructions are here: https://www.hackforla.org/join

[vincentdang]

in progress no blockers will work on it M-F evenings. give me a week or two. na

[vincentdang]

Update: created a feature branch to check the issue with and have begun exploring it in vs code. Blockers: Need to figure out which files contain the tools icon and where to find the code in vs code. Also, I was wondering if there is a default login username/password for the website. I would like to find out which html pages contain the tool tip icons @entrotech will work on it M-F evenings. give me a week or so. na

[vincentdang]

Update: Found the location of the question mark icon. It is in ToolTipIcon.js. Blockers: Need to get a new 1password and account for the tdm calculator website. @Biuwa Need to figure out how to make it display tool tips when hovered over. More time ( a week or two).

[vincentdang]

I suspect it might be missing the hover code

[vincentdang]

Update: I suspect I need to add a hover json object to flexbasis. Blockers: Need to refresh on how to run and test changes before committing. More time ( a week or two).

[vincentdang]

I'm trying to commit some changes after running the server but am having issues. Blockers: Need to refresh on how to run and test changes before committing. I'll continue again.

[WomB0ComB0]

This should help -> https://developer.chrome.com/blog/anchor-positioning-api?hl=en&ref=dailydev

[WomB0ComB0]

Committing what I currently have.

[ExperimentsInHonesty]

@akinevans Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[akinevans]

Progress: Currently working on finding the code that that is "broken". Initially I thought it was a CSS issue somewhere in TooTip.js and or ToolTipLabel.js but no issue has been found just yet. Currently suspect some interference, or a problem with the implementation of react-tooltip library. Currently following the documentation to ensure proper use.

Blockers: In the dev environment I get an error anytime I visit the "My Projects" page. Image below Saving a file in VS code removes the error until the "My Projects" page is refreshed.

Availability: Working on it Wednesday and Friday mornings. Additional time spent on weekends if I'm able to.

ETA: Week of August 26

Images:

[ExperimentsInHonesty]

@akinevans Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[akinevans]

Progress: Unfortunately I was unable to resolve this issue. I do believe the problem exists inside one of the following files:

• ToolTip.js
• ToolTipIcon
• ToolTipLabel.js
• SidebarPoints.js
• SidebarPointsPanel.js

The React ToolTip trouble shooting guide may contain answer. I was unable to find the correct combination of code changes to fix the issue. Link to troubleshooting guide

Findings:

• I no longer believe the issue to be CSS / styling related
• I believe there to be an error in the implementation of the React ToolTip component
• Its possible some code in SidebarPoints.js or SidebarPointsPanel.js is "blocking" the tooltip from appearing as it should.

[entrotech]

@akinevans Thanks for the pointer to the troubleshooting page. It turns out that we upgraded from v4 to v5 of the Tooltip component react-tooltip component, but this was a big breaking change to the component, so it no longer works. We need to update the code that uses the tooltip component to use one of the patterns described here in the package documentation.

[mmogesdesigns]

I wanted to provide an update regarding my progress on this project. I was away for a period due to some family issues, but I am now back and focused on completing my tasks. I expect to be done by next week's meeting. Thank you for your understanding and support!