1. Sie sind hier:
  2. Home
    3. |
  3. TYPO3-Support
    4. |
  4. tooltip

Tooltip-Extension

Letzte Änderung:

Komplexe Inhalte verständlich zu machen, ist eine Herausforderung – besonders bei Fachbegriffen, Abkürzungen oder unternehmensspezifischen Begriffen, die immer wieder auftauchen. Unsere eigens entwickelte TYPO3-Extension löst genau dieses Problem: Sie ergänzt Inhalte automatisch mit erklärenden Tooltips, ohne dass Redakteure ständig Erläuterungen manuell einfügen müssen.

Tooltip-Begriffe werden im Frontend
Tooltip-Begriffe in der Frontenddarstellung

Wie funktioniert’s?

Pflege der Tooltips im Backend
Pflege der Begriffe im Backend

Redakteure können eine zentrale Liste mit Begriffen und den dazugehörigen Erläuterungen pflegen. 

Sobald einer dieser Begriffe im Fließtext eines Inhaltselements auftaucht, erkennt die Extension ihn automatisch, unterstreicht ihn visuell und fügt beim Mouseover (bzw. bei Touch-Interaktion auf mobilen Geräten) einen Tooltip mit Erklärungstext ein. 

Die Erläuterung wird dabei als `title`-Attribut im HTML-Code ausgegeben.

Mobile Darstellung
Mobile Darstellung der Tooltipps

Vorteile für Redakteure

  • Kein wiederholtes Erklären von Fachbegriffen
  • Einheitliche, konsistente Begriffserläuterungen auf der ganzen Website
  • Redakteure behalten die volle Kontrolle über Begriffe und Erklärungen – zentral an einer Stelle gepflegt

Optimiert für alle Geräte

Die Funktion ist nicht nur auf Desktop-Nutzer ausgelegt: Auf Mobilgeräten wird der Tooltip per Klick statt Hover angezeigt – so bleibt die Barrierefreiheit auch auf Touch-Geräten gewährleistet.

Beitrag zur Barrierefreiheit

Die Erweiterung verbessert nicht nur die User Experience, sondern leistet auch einen Beitrag zur digitalen Barrierefreiheit:

  • Menschen mit kognitiven Einschränkungen oder ohne technisches Vorwissen profitieren von kurzen, kontextbezogenen Erläuterungen.
  • Durch die dezente visuelle Hervorhebung und klare Struktur wird der Lesefluss nicht gestört.

Technisch flexibel & erweiterbar

Die Extension ist:

  • leicht konfigurierbar (Begriffsdatenbank, Darstellung, Verhalten)
  • kompatibel mit allen gängigen Inhaltselementen
  • frontendseitig schlank und performant

Installation

Die Installation ist recht einfach:

  • Extension via Composer oder Extensionmanager installieren
  • StorageOrdner erstellen
  • Typoscript einbinden und Storage-Id setzen

Danach Datensätze anlegen, jeweils mit

  • einer ID (das ist der String, der im Text eingegeben und dann durch das Tooltip-Element ersetzt wird)
  • einen Text, der angezeigt wird (gepunktet unterstrichen)
  • einer (kurzen) Erläuterung, dem Tooltip

Es sollte mit Klick und Hover funktionieren. 

Die Ersetzung haben wir auf die HTML-Tags <li> und <p> beschränkt, damit es nicht (z.B. bei Überschriften) das Layout stört.

Alles wichtige auch im Video:

Transscript zum obigen Video

Mit der von uns entwickelten TYPO3 Extension "tooltip" können Hilfstexte (sog. "Tooltips") für bestimmte Fachbegriffe ausgespielt werden.

In diesem Video zeigen wir Euch Installation und Anwendung am Besipiel des Begriffs "SERP".

Als erstes müsst ihr die Extension installieren.

Nutzt dafür folgenden Befehl in Eurem TYPO3 Installationsverzeichnis:

composer require wacon/tooltip

Danach müsst ihr die Datenbank aktualisieren und den Systemcache löschen.

Nun bindet ihr das statische TYPOSCRIPT der Extension in Eure Site-Konfiguration ein.

Legt jetzt einen Ordner an, in dem ihr alle Begriffe, für die es Tooltipps geben soll, ablegt.

Die ID des Ordners (im Beispiel die 34) müsst ihr dann noch in den Settings von TYPO3 unter Tooltip -> "Storage PID" eintragen.

Jetzt könnt ihr in dem angelegten Ordner die Tooltip-Datensätze anlegen.

Wenn ihr das Frontend aufruft, seht ihr nun den gestrichelt unterlegten Begriff. Wenn man mit der Maus drüberfährt, erscheint der Tooltip.

In der mobilien Variante erscheint der Hilfstext beim Klicken auf den Begriff.