Tooltip Tooltip
Einführung
Die Tooltip-Komponente ist ein kontextuelles Overlay-Element, das ergänzenden, nicht-interaktiven beschreibenden Text anzeigt, wenn der Zeiger den Trigger berührt oder fokussiert.
Verwendung
Speziell für unsere Zero-JS-Static-Rendering-Architektur und das bedingte Hydration-Modell konzipiert, nutzt der Tooltip effiziente, Page-Builder-freundliche Bindings, damit Redakteure kontextuelle Hinweise nahtlos an beliebige UI-Elemente heften können.
Diese Beispiele zeigen, wie Redakteure Tooltip-Blöcke konfigurieren und binden.
1. Basis-Tooltip mit Button-Trigger
Ein klassischer Hover-Hinweis, der eine Button-Aktion erklärt, mit Standard-Platzierung (oben zentriert).
{
"type": "tooltip",
"triggerText": "Submit Report",
"content": "Sends your compiled analytics to the billing department."
}
2. Multi-Seiten-Platzierung und deaktivierter Tooltip
Dieselbe Komponente wird über die placement-Eigenschaft in mehrere Richtungen (unten, rechts, links) verschoben, um schmale Panels zu bedienen. Der dritte zeigt die disabled-Variante, die beim Deaktivieren keinen Hinweis zeigt.
{
"type": "tooltip",
"triggerText": "Bottom Hint",
"content": "Appears below the trigger.",
"placement": "bottom",
"interactive": true
}
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Trigger-Text (triggerText) | string | "Hover me" | Visuelles Label innerhalb des Tooltip-Triggers. |
Tooltip-Inhalt (content) | string | - | Ergänzender Hilfetext beim Hover. |
Platzierung (placement) | select | "top" | Physische Verankerungsrichtung relativ zum Trigger. • Optionen: "top", "bottom", "left", "right" sowie -start/-end-Varianten. |
Deaktiviert (disabled) | boolean | false | Deaktiviert die Tooltip-Funktion vollständig. |
Interaktiv erzwingen (interactive) | boolean | true | Hydriert die Tooltip-Insel zum Binden von Hover/Fokus. |
Verzögerung (ms) (delayMs) | number | 300 | Millisekunden, die der Tooltip vor dem Auslösen wartet. |
Architecture Notes
- Intelligente Viewport-Grenzausrichtung: Die interaktive Preact-Insel verfolgt den Bildschirmplatz dynamisch. Öffnet sich der Tooltip nahe einer Kante, wird die Richtung automatisch umgekehrt (z. B. von unten nach oben) und entlang der Achse verschoben.
- Einheitliche Event-Delegation: Hover-Erkennung, Fokus-Anzeige und Escape-Schließen werden zentral vom Container delegiert, minimiert clientseitige Bindings.
- Semantische Overlays: Tooltips kompilieren in native, barrierefreie Layouts mit
role="tooltip",aria-describedbyund eindeutigen Trigger-IDs ab Werk.