shadcn.io is not affiliated with official shadcn/ui
Glossary Tooltip FAQ Block for Ark UI
A FAQ for a rooftop-solar installer where technical terms inside the answers are dotted-underlined buttons that open a one-line definition.
Installation
Overview
A glossary-tooltip FAQ for React with Ark UI. A start-aligned title and sentence sit above six questions in hairline rows on a narrower column, under a rule with + marks at its ends, each with a circled chevron. Inside the answers, technical terms (kWh, inverter, net metering and four more) are dotted-underlined buttons: click, tap, or press Enter or Space on one and a small tooltip opens with a one-line definition, and Escape closes it and returns focus to the term. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion, Toggle Tooltip and Guides, with CSS transitions and your theme's tokens for every colour. For products with jargon the visitor has to take on trust: energy, insurance, finance, medicine.
FAQ
How do I add or change a glossary term?
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.
How do the tooltips open and close?
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.
What does a screen reader announce?
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.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all six.
How does it work with a keyboard?
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 Up and Down arrows also move between questions, and Home and End jump to the first and last.
What moves, and what happens with reduced motion?
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.