Add helper tooltips for form fields

[Muskankr]

Summary [required]

This PR improves the usability and accessibility of the DevPath recommendation form by adding beginner-friendly helper tooltip and hint text for important fields. New contributors and learners may find fields like Skills, Area of Interest, and Time Availability confusing while filling out the form. These additions provide clearer guidance, reduce onboarding friction, and improve the overall user experience without affecting existing functionality.

Related Issue [required]

Closes #20

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
templates/index.html	Added helper hint text/tooltips for Skills, Area of Interest, and Time Availability fields
static/style.css	Added styling for helper text and tooltip UI consistency

How to Test This PR [required]

1. Clone this branch:
   git checkout feat/form-tooltips

2. Install dependencies:
   pip install -r requirements.txt

3. Run the app:
   python app.py

4. Open:
   http://127.0.0.1:5000

5. Scroll to the “Find Your Next Project” section

6. Verify:

   • Helper text appears below relevant form fields
   • Tooltip/hint text improves clarity for beginners
   • Layout remains responsive on desktop and mobile
   • Existing form functionality still works correctly

7. Run the tests:
   python tests/test_basic.py

Expected test output:

All tests passed successfully

Test Results [required]

All tests passed successfully

Screenshots

Before Tooltips

After Tooltips

---

##Test Results

PASS test_projects_json_loads
PASS test_each_project_has_required_fields
PASS test_find_project_by_id_found
PASS test_find_project_by_id_missing
PASS test_parse_skills_basic
PASS test_parse_skills_empty_string
PASS test_parse_skills_single_entry
PASS test_score_single_project_full_match
PASS test_score_single_project_no_match
PASS test_get_recommendations_returns_results
PASS test_get_recommendations_max_three
PASS test_get_recommendations_no_match_returns_empty
PASS test_get_recommendations_result_format
PASS test_validate_all_valid
PASS test_validate_missing_skills
PASS test_validate_missing_level
PASS test_validate_missing_interest
PASS test_validate_missing_time
PASS test_validate_all_missing
PASS test_home_route
PASS test_recommend_api_valid
PASS test_recommend_api_missing_field
PASS test_recommend_api_empty_body
PASS test_project_detail_found
PASS test_project_detail_not_found
PASS test_view_code_found
PASS test_download_code_found

27 passed, 0 failed out of 27 tests

---

Self-Review Checklist [required]

• I have read [CONTRIBUTING.md](../CONTRIBUTING.md) and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Thanks you reviewing this PR!

[vercel]

@Muskankr is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Muskankr]

Hi @komalharshita,
Implemented beginner-friendly helper tooltip text for key form fields to improve accessibility and onboarding experience.
Tested responsiveness and existing functionality locally. Looking forward to feedback 🚀

[komalharshita]

Thank you for the contribution. The helper text and tooltip additions improve the beginner experience and make the recommendation form easier to understand.

The implementation itself is clean and the added hints are genuinely useful for onboarding new users.

However, this PR also includes many unrelated formatting and indentation changes across index.html that are outside the scope of the issue. This makes the diff harder to review and may create unnecessary merge conflicts later.

Please try to keep future PRs focused only on the files and lines directly related to the feature being implemented.

Before merging, it would also help to:

• add before/after screenshots for the UI changes
• paste the actual test output instead of a generic success message

Overall, the feature is useful and the core implementation looks good.

[Muskankr]

Hi @komalharshita,

Thank you for the review and feedback.

I’ve now:

• removed unrelated formatting/indentation changes from index.html
• added before/after screenshots for the tooltip UI updates
• updated the PR with the actual local test output

Really appreciate the suggestions and review

[Muskankr]

Hi @komalharshita, I have now changed and update everything as you said.
Really appreciate the suggestions further and review.

[komalharshita]

Thank you for addressing the requested changes.

The PR is now much cleaner and easier to review. The added helper text and tooltips improve the onboarding experience for beginners and make the recommendation form more user-friendly without affecting existing functionality.

I also appreciate that you:

• removed unrelated formatting changes,
• added before/after screenshots,
• and included proper test output.

Approved for merge.