shadcn.io is not affiliated with official shadcn/ui
Hover Preview FAQ Block for Vue
A FAQ for a courier tracking portal where hovering or focusing a question shows a hover card with a one-line summary, and opening it shows the full answer.
Installation
Overview
A hover-preview FAQ for Vue with Ark UI. Six questions run down the start side in hairline rows, with the title, one sentence and an outline link at the end, behind a split divider. Hover a question, or Tab to it, and a small hover card shows its one-line summary and "Press Enter to open"; opening the row shows the whole answer. A hover card can't be tabbed into, so every summary is also real text tied to its question with aria-describedby, and on a touch screen, where there is no hover, the summary shows under the question instead. On a phone the header stacks above the questions. 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, Hover Card, Kbd, Button and Guides, with CSS transitions and your theme's tokens for every colour. For support pages where a visitor wants the gist of each question before reading the answer.
FAQ
How do I change the questions?
Edit QUESTIONS at the top of the file: each entry is an id, the question, a one-line summary and the full answer. The summary appears in the hover card, in the text tied to the question, and on touch screens under it. OPEN_QUESTION names the row that's open on load; set it to an id that doesn't exist to start with all of them closed.
When does the hover card appear?
When a mouse rests on a question for a moment, and when keyboard focus lands on one. It closes when the pointer or the focus leaves, and on Escape. Opening the row with Enter, Space or a click doesn't hide it, because the answer opens beneath it. A touch screen never shows the card, since a tap goes straight to opening the row.
The question button is the hover card's trigger: HoverCardTrigger takes asChild around it, so the card anchors to the row.
How does a keyboard or screen reader reach the summary?
Each question button has aria-describedby pointing at the summary text, so a screen reader reads the summary after the question, with no hover needed. That text is hidden visually on a wide screen with a mouse (it would repeat the card) and shown under the question on phones and on any touch device, so nobody has to find the card to read it.
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 the Track a parcel link in the header to each question in turn, Enter or Space opens and closes one, 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.