Page MenuHomePhabricator

Add Helpful Tooltips
Closed, ResolvedPublic

Description

**Title: Add Helpful Tooltips
Description: Create short tooltips to guide users.
Domain: Design (Frontend)
Difficulty: Beginner
Steps:

  1. Identify confusing areas.
  2. Add tooltips or question-mark icons.
  3. Test hover and focus behavior.

Expected outcome: Users understand UI elements more easily.

Event Timeline

Codewithmac subscribed.

i am working on this task

Thank you for the update, @Codewithmac.

At this stage, this task is not yet ready for approval.

For audit and verification purposes under WMA contribution guidelines, please update this task with evidence of work done, including at least one of the following:

• Screenshots showing the added tooltips in the UI (before/after if applicable)
• A GitHub Pull Request (PR) link or clear code diff reference
• A short explanation of where the tooltips were added and how their hover/focus behavior was tested

A text-only comment stating “Task completed” is not sufficient for approval.

Once the required evidence is added directly to this task, I will review again.

Thank you.

Helpful tooltips added
I added concise, accessible tooltips to the key UI elements so users understand the interface faster without extra clicks.

Where tooltips were added

Header (navbar)

  1. Logo (Home): title="Home"
  2. Country selector: aria-label="Select country", title="Filter cases by country"
  3. About link: title="About this project"
  4. Back button: title="Back to home search"

HomePage

  1. Search input: aria-label="Search input", title="Search for a case by name, number, or keyword"
  2. Search button: aria-label="Search", title="Search"
  3. SearchResultsPage
  4. Results count: title summarizing the count for the current query

Files updated

  1. client/src/components/Header.tsx
  2. client/src/components/HomePage.tsx
  3. client/src/components/SearchResultsPage.tsx
<a 
            href="https://github.com/Sunkanmi1/SCC-WEBAPP.git" 
            target="_blank" 
            rel="noopener noreferrer" 
            className="nav-link github-link"
            title="View on GitHub"
          >
            <Github size={20} />
          </a>

whereby : title="View on GitHub" is the tooltip added

PR

https://github.com/Sunkanmi1/SCC-WEBAPP/pull/30/commits/9b48db56dc5906c926ca7a802eae2da5d5a18a60

tooltip.png (1,632×475 px, 364 KB)

Thank you for the clarification. I appreciate the guidance.

I’ll update the task with the required evidence, including screenshots and
a brief explanation of the tooltip additions and testing process. If
needed, I can also include the relevant PR link/code references.

Once everything is added, I’ll notify you so the task can be reviewed again.

Thank you for your patience and support.

Thank you for your contribution.
I have reviewed the submitted work and confirmed the following:
✔️ Task requirements have been addressed
✔️ Work aligns with the current project scope
✔️ Evidence (links/screenshots/PR) is sufficient for audit purposes
✔️ No overlap or conflict with other assigned tasks
✔️ Contribution follows the agreed workflow and guidelines
This task is now approved and resolved.
📌 Next step for contributor:
Please proceed to fill the official contribution submission form using this task ID to complete your participation record.
Thank you for your effort and collaboration 🙌
Task resolved.
— Ali (SCC Mentor / Reviewer)