Glossary Tooltip FAQ Block for React

Add an entry to GLOSSARY with an id, the label that shows in the answer and the tip that explains it, then put { term: "id", text: "label" } in an answer's pieces where the term should appear. An answer is a list of pieces, plain words and terms in order, so a sentence reads left to right and the same term can appear in several answers. Keep a tip to one or two sentences.

Each term is a real button, so it opens on a click, a tap, or Enter or Space from the keyboard, and closes on Escape or a click elsewhere; focus then goes back to the term. They don't open on hover alone: a tooltip you can't reach with a finger or a keyboard leaves most visitors without the definition, so a press is the one way that works for everyone. Focus moves into the tooltip when it opens and its text is named after the term.

The term reads as a button inside the sentence, "kWh, button, collapsed", and the opened tooltip is announced as a dialog named after the term, with its definition as the content. Terms inside a closed answer can't be reached until the question is open.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all six, and the browser's find in page opens the answer that holds a match.

Each question is a button inside its own h3 under the section's h2. Tab moves from question to question, and into the terms of an open answer in reading order. Enter or Space opens and closes a question, and one answer is open at a time.

The header and the list fade up once when the page loads, a tooltip fades and slides in a few pixels, and the chevron turns. With reduced motion the entrances are off, the tooltip simply appears and the chevron turns without animating. The answers also open and close at once, with no height animation.