Skip to content

Field help belongs in a tooltip, not a paragraph under every control #2250

Description

@s0up4200

Most qui forms put a <p className="text-xs text-muted-foreground"> under each control. One paragraph is fine. Eight of them turn a dialog into a scrolling page, and the fields the user came for end up below the fold.

The Dir Scan directory dialog hit this in #2248: nine controls, seven help paragraphs, roughly half the height was prose. Moving the prose into tooltips on the labels cut about 40% of the height without hiding a single control. That dialog already used the tooltip pattern on one field, so the two styles were sitting next to each other.

Proposed rule for new and edited forms: field help goes in a tooltip on the label, not a paragraph under the control.

Keep inline, never tooltip:

  • error and validation messages
  • warnings about data loss or irreversible actions (for example the regular-mode orphan warning in the same dialog)
  • text the user must read before choosing, not after

Worth a sweep of the existing forms, roughly in order of how tall they are:

  • Cross-seed settings
  • Dir Scan settings dialog
  • Instance form and preferences
  • RSS rule form
  • Automations
  • Notification targets

A shared FieldHelp component exists in web/src/components/cross-seed/DirScanTab.tsx as of #2248 and should move to web/src/components/ui/ when the second caller appears.

Two things to settle before the sweep: whether tooltips open on tap on touch devices well enough to carry required reading, and whether the icon needs an accessible name (the current trigger is an icon with no label).

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions