Andras/BoundlessFlowCampus2K

Fork 0

435-tooltip-component #455

Merged

c24elipe merged 3 commits from 435-tooltip-component into team_2_week_2

2026-04-22 06:31:19 +00:00

b23albst commented

2026-04-20 22:11:03 +00:00

Collaborator

At the moment, you can simply add the tooltip component at the start of the card component in a view, and it will appear in the top right corner, though this has only been tested on parking, map and image view.

For the positioning of the tooltip text, I just shifted it to the left by a set amount of pixels, which means it is not centered when cards are resized and probably won't scale well. But at least the text is visible at all times (as far as I know).

The component is mostly done, but there might be some minor adjustments needed. Since I will be away tuesday. I'm creating this pr to make sure these changes get through and work can be continued after the weekly merge without merge conflicts. Since there are only two files being added, they could easily be stored and re-added after the weekly merge, if we don't want to add "unfinished code". In that case, just delete this pr. At the moment, you can simply add the tooltip component at the start of the card component in a view, and it will appear in the top right corner, though this has only been tested on parking, map and image view. ![image](/attachments/016c23ae-c2fd-4dac-be37-3f174127b9e6) ![image](/attachments/071b74c1-9b4d-4e22-95d6-8af913a72985) For the positioning of the tooltip text, I just shifted it to the left by a set amount of pixels, which means it is not centered when cards are resized and probably won't scale well. But at least the text is visible at all times (as far as I know).

image.png

81 KiB

image.png

22 KiB

b23albst added 2 commits

2026-04-20 22:11:04 +00:00

Added tooltip component, its css file and a question mark image f1e2cec06f

Changed the tooltip to just use <p> to not have to worry about dark mode. Also minor changes to css file b053e2d142

b23albst was assigned by c24elipe

2026-04-21 06:58:32 +00:00

c24elipe requested review from c24carso

2026-04-21 07:01:29 +00:00

c24carso commented

2026-04-21 08:22:19 +00:00

Collaborator

Review on #435

Whats done

Tested on Windows using Firefox

App starts
- Tooltip component was tested by manually adding it to ParkingView as shown in the screenshots. It works, hovering shows the tooltip text above the card.

Inspected following files

frontend/src/components/Tooltip/Tooltip.js
- Indentation/code styling
  - Follows Prettier
- Naming convention
  - Follows wiki standards
- Comments
  - No comments, file is simple enough
- General code quality
  - No issues found
frontend/src/components/Tooltip/Tooltip.module.css
- Indentation/code styling
  - Follows Prettier
- Naming convention
  - Lowercase class names, follows wiki standards
- Comments
  - No comments. CSS wiki says "Have descriptive comments for every rule set"
- General code quality
  - color: white on line 15 should be a hex code color per CSS wiki standards
frontend/package.json
- No new dependencies added

What needs to be done

frontend/src/components/Tooltip/Tooltip.module.css
- Add descriptive comments for each rule set per CSS wiki standards
- Change color: white to color: #ffffff per CSS wiki standards

Conclusion

Component code is good. Two minor CSS convention issues need fixing but can be done after merge when resuming work on issue.

# Review on #435 ## Whats done ### Tested on Windows using Firefox + App starts + Tooltip component was tested by manually adding it to ParkingView as shown in the screenshots. It works, hovering shows the tooltip text above the card. ### Inspected following files + frontend/src/components/Tooltip/Tooltip.js + Indentation/code styling + Follows Prettier + Naming convention + Follows wiki standards + Comments + No comments, file is simple enough + General code quality + No issues found + frontend/src/components/Tooltip/Tooltip.module.css + Indentation/code styling + Follows Prettier + Naming convention + Lowercase class names, follows wiki standards + Comments + No comments. CSS wiki says "Have descriptive comments for every rule set" + General code quality + `color: white` on line 15 should be a hex code color per CSS wiki standards + frontend/package.json + No new dependencies added ## What needs to be done + frontend/src/components/Tooltip/Tooltip.module.css + Add descriptive comments for each rule set per CSS wiki standards + Change `color: white` to `color: #ffffff` per CSS wiki standards ## Conclusion + Component code is good. Two minor CSS convention issues need fixing but can be done after merge when resuming work on issue.

c24carso added the

reviewed

label

2026-04-21 08:22:55 +00:00

c24elipe approved these changes

2026-04-21 13:12:08 +00:00

c24elipe left a comment

Collaborator

The seams seem to work well from a quick overview

c24elipe added 1 commit

2026-04-21 13:22:54 +00:00

Added comments and fix colours 192d21e4be

c24elipe commented

2026-04-21 13:24:03 +00:00

Collaborator

Updated the code to be compliant with the review feedback

c24elipe self-assigned this

2026-04-21 13:25:18 +00:00

c24elipe requested review from a22erigr

2026-04-21 13:25:21 +00:00

a22erigr approved these changes

2026-04-21 13:33:10 +00:00

a22erigr left a comment

Collaborator

Inspected file css file. Seems fine to me

noted color white --> ffffffff
Comment added.
All of the comments are well written and surves a clear purpose

## Inspected file css file. Seems fine to me + noted color white --> ffffffff + Comment added. + All of the comments are well written and surves a clear purpose

c24elipe commented

2026-04-22 06:31:08 +00:00

Collaborator

I see the comment and deem it good enough to merge.

c24elipe merged commit 463484dc9f into team_2_week_2

2026-04-22 06:31:19 +00:00

c24elipe referenced this pull request from a commit

2026-04-22 06:31:20 +00:00

Merge pull request '435-tooltip-component' (#455) from 435-tooltip-component into team_2_week_2

c24elipe deleted branch 435-tooltip-component

2026-04-22 06:31:22 +00:00