Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Show an explanatory popup when hovering over tags and filter names

Open
  • Is something wrong?
#324 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript, react
Domain
accessibility, frontend

Research direction

Start by reading components/hooks/ProblemFilters/tagLabels.js, then trace how filter options and chips are rendered in FacetFilterGroup.js and ProblemCard.js; the issue also points to components/widgets/PopoverTooltipClick.js and MUI Tooltip. The desired behavior covers sidebar filters, group headings, and card tags, including touch and keyboard access. Done means consistent explanations appear across those locations without repeating the dark-mode contrast issue in #253.

Written by the indexing model from the issue text.

Description

enhancement

Summary

Hovering over a tag (on problem cards and dropdowns) or a filter name (in the Browse sidebar) should open a small popup explaining what it means. For example, hovering "NP-Complete" explains the class, and hovering "Approximation" explains what an approximation solver promises.

Why

The tags and filters use terms like BQP, QCMA, Parameterized, Stochastic, or Sets and Partitions that many students won't know. The explanation is one hover away but nowhere on the page today.

Proposal

  1. One source of text. Add a short description for each tag value next to its label in components/hooks/ProblemFilters/tagLabels.js, so the Browse sidebar, problem cards, and dropdown tags (#178, #254, #255) all show the same text. Longer descriptions could come from the backend enums' doc comments later.
  2. Popup component. Use MUI Tooltip with a short delay (or reuse components/widgets/PopoverTooltipClick.js), styled like the existing problem tooltips. Include the full name, a 1–2 sentence explanation, and optionally a "Learn more" link.
  3. Where: filter option names in FacetFilterGroup.js, the group headings (Complexity Class, Solver Type…), and the chips in ProblemCard.js.
  4. Touch and keyboard: on phones there's no hover, so tap-and-hold or a small info icon should open it (#302). Keyboard focus should open it too.
  5. Watch the dark-mode header contrast bug in #253 so the new popups don't repeat it.

Related

  • #286: Browse and Home tags/filters tracker
  • #178, #254, #255: tag components that would show the popup
  • #176: tooltip text formatting

Issue Handling

New issue, not tied to an existing one.

Dominant language
JavaScript
Stars
3
Forks
18
Avg merge
22h 57m
Merged PRs (30d)
37

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • Ships a Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ReduxISU/Redux_GUI

All issues in ReduxISU/Redux_GUI

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.