Skip to content

The help tip pipeline

Tooltip text in the admin panel and the organiser manual come from one source: the manual. This page describes how.

Why

Tooltip copy used to live as inline strings across roughly thirty admin screens, while the same explanations lived in the docs. Nothing compared the two, so they drifted — and the drift was invisible, because nobody diffs a tooltip against a documentation page.

How it works

A guide page declares the tips it owns:

yaml
---
title: General settings
helptips:
  - id: setup.general.slug
    anchor: url-slug
    body: The event's web address. Change it before you share any links.
---

npm run docs:build regenerates both copies. The admin imports its copy at build time, so it has no runtime dependency on the docs site.

Validation

The script fails loudly on the mistakes that would otherwise ship silently:

  • An anchor that is not a heading on that page — a dead "Learn more" link.
  • A duplicate id across pages.
  • A body over 220 characters — past that, the popover is a wall of text and the manual is the better answer.

In the admin

<HelpTip id="setup.general.slug" /> renders the body and a Learn more link to the manual section.

  • body= still works and takes precedence, so unmigrated screens are untouched.
  • An unknown id renders no icon at all — deliberate, since the admin and the manual deploy independently and either can lead.

That last behaviour is convenient at runtime and dangerous for typos: a mistyped id silently removes a tooltip. npm run check:helptips in the admin fails the build on any id that does not resolve.

Wiring a screen

Each admin screen defines its own local SectionCard / FormField / ToggleCard wrappers, so migration is per file:

  1. Add helpTipId to that file's wrapper signatures.
  2. Render <HelpTip id={helpTipId} body={helpTip} />.
  3. Replace helpTip="..." with helpTipId="..." on the documented fields.
  4. Run npm run check:helptips.

Delete the inline string rather than keeping it alongside the id — two copies of one sentence is the drift this exists to remove.

Check the wrapper actually accepts the prop

One screen was passing helpTip into a SectionCard that never declared it, so the tooltip had never rendered at all. Passing a prop nothing reads fails silently in React.

Organiser guide and developer documentation for the TogoActive platform.