Help Tooltip
Glossary trigger for domain terms — small info icon next to a label, tooltip with the definition. Pattern for domain apps with specialist vocabulary (heating-cost billing, tax, payroll, insurance). Combines Tooltip + Button (ghost, 2xs) + InfoCircleIcon.
Live Preview
System efficiency is reported via the Jahresarbeitszahl
Table header
| Apartment | WMZ reading Heat meter — measures the heat energy delivered, in kWh. Mandatory in multi-unit buildings for heating and hot water, so consumption can be billed to each apartment by actual use. | Consumption |
|---|---|---|
| Unit 1 | 12,420 kWh | 8,150 kWh |
| Unit 2 | 9,880 kWh | 6,230 kWh |
Features
- Consistent trigger across value types — form labels, table headers, inline text
- Tooltip with Floating-UI positioning (placement="top", auto-flip)
- Glossary map as the single source of truth (i18n-ready, centrally maintained)
- A11y: aria-label on the trigger ("Explanation: HeizKV § 7"), tooltip also reachable via focus
- Keyboard: Tab focuses, tooltip appears, Escape closes
Code
HelpTooltip.svelte (Wrapper)
lib/glossary.ts (central map)
Usage in a form label
Best Practices
Keep the glossary central
A glossary.ts map with term + text as the single source
of truth. With i18n: one map per locale. That keeps the wording consistent across form labels,
tables, and tooltips.
Don't forget the aria-label
The trigger is an icon-only button — screen readers need the term in the aria-label ("Explanation: HeizKV § 7"). Otherwise the
user only hears "button" with no context.
Intent for risk hints
For legally or safety-relevant explanations (intent="warning" for mandatory values, intent="danger" for consequences). Default neutral for purely informational tips.
Inline variant for running text
Instead of a separate icon button, the term itself can act as the tooltip trigger: a
subtle border-bottom dotted signals "hover for more". Saves space, avoids icon sprawl in running text.
Don't misuse it for mandatory documentation
Tooltips are not suited to compliance texts or legal notices — those must be permanently visible. HelpTooltip is only for supporting explanations the user could also do without.