Radix tooltip explains why the Create button is disabled

The "Review name" and "Workflow name" inputs in the creation modals are styled as large serif headings, so users miss them and assume the greyed-out Create button is broken. easterbrooka iterated through three commits to fix it, landing on a Radix tooltip as the final approach.

chat-uiworkflow

The first commit (12ed264) added a native title attribute to the Create button in AddNewTRModal.tsx - "Review name required" or "Select a project" depending on which condition blocked submission. The second (a1c8bd1) mirrored the same fix into NewWorkflowModal.tsx.

That approach broke immediately in practice: native title tooltips don't fire reliably on disabled <button> elements because disabled elements don't receive mouse events. The third commit (766d170) replaces both with @radix-ui/react-tooltip. The implementation wraps the disabled button in a <span tabIndex={0} className="inline-block"> to capture hover events, then renders a TooltipProvider / TooltipTrigger / TooltipContent stack around it. The disabledReason logic is pre-computed into a variable (null when the button is enabled, a string when it isn't) so the tooltip only renders when there's actually something to say.

The same commit adds amplify.yml to the repo root, switching the Amplify build from npm ci to npm install --legacy-peer-deps. That's a fork-specific deploy decision, not something to bring across - npm ci's lockfile-strict guarantee is worth keeping, and the npm install swap was only there because adding @radix-ui/react-tooltip without regenerating the lockfile would have broken ci.

So what The Radix tooltip fix is worth importing in its final form - skip the two intermediate `title`-attribute commits and take `766d170` directly. It solves a real usability problem in modals that upstream also has. Leave `amplify.yml` behind; `npm install` in CI trades away build reproducibility and the only reason it's there is the author didn't want to regenerate the lockfile.

Spotted something wrong? Or know the PR text has fresher detail than the writeup above?

Commits in this thread

3 commits from easterbrooka/mike, oldest first. Source extracted verbatim from the harvested git log.

SHA	Subject	Author	Date
`12ed2644`	Add hover tooltip explaining why Create button is disabled	andrew	2026-05-05	↗ GitHub
commit body The Review name field at the top of the New Tabular Review modal is visually subtle (large serif text input that looks like a heading), so users can miss it and assume the disabled Create button is broken. Add a native title attribute that surfaces the gating reason on hover. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`a1c8bd1e`	Add hover tooltip on disabled Create workflow button	andrew	2026-05-05	↗ GitHub
commit body Same UX problem as the tabular review modal: the Title field is a large serif input that looks ornamental, and users assume the disabled button is broken. Native title attribute surfaces the gating reason on hover. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`766d170d`	Use Radix tooltip for disabled Create buttons	andrew	2026-05-05	↗ GitHub
commit body Native title-attr tooltips don't reliably fire on disabled <button> elements (browser-dependent). Switch to @radix-ui/react-tooltip with a span wrapper around the disabled button so hover events are captured. - Add @radix-ui/react-tooltip dep - Add components/ui/tooltip.tsx (shadcn-style wrappers) - Wrap the disabled Create button in AddNewTRModal and NewWorkflowModal - Switch Amplify build from npm ci to npm install (committed amplify.yml at repo root) so adding deps doesn't require regenerating the lockfile Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

SHA

Subject

Author

Date

12ed2644

Add hover tooltip explaining why Create button is disabled

andrew

2026-05-05

↗ GitHub

commit body

The Review name field at the top of the New Tabular Review modal is
visually subtle (large serif text input that looks like a heading), so
users can miss it and assume the disabled Create button is broken. Add
a native title attribute that surfaces the gating reason on hover.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

a1c8bd1e

Add hover tooltip on disabled Create workflow button

andrew

2026-05-05

↗ GitHub

commit body

Same UX problem as the tabular review modal: the Title field is a large
serif input that looks ornamental, and users assume the disabled button
is broken. Native title attribute surfaces the gating reason on hover.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

766d170d

Use Radix tooltip for disabled Create buttons

andrew

2026-05-05

↗ GitHub

commit body

Native title-attr tooltips don't reliably fire on disabled <button>
elements (browser-dependent). Switch to @radix-ui/react-tooltip with
a span wrapper around the disabled button so hover events are captured.

- Add @radix-ui/react-tooltip dep
- Add components/ui/tooltip.tsx (shadcn-style wrappers)
- Wrap the disabled Create button in AddNewTRModal and NewWorkflowModal
- Switch Amplify build from npm ci to npm install (committed amplify.yml
  at repo root) so adding deps doesn't require regenerating the lockfile

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Capture this thread into my fork

Download a single Markdown prompt that tells Claude how to port every commit above into your working tree — adapting paths and structure to match your repo. Run it via claude -p < capture-thread-56.md from inside the repo you want the changes in.