call Contact
tooltip TYPO3 Extension by WACON

Tooltip Extension

Making complex content understandable is a challenge – especially with technical terms, abbreviations or company-specific terminology that keeps coming up. Our own TYPO3 extension "tooltip", published in the TER, solves exactly this problem: it automatically supplements content with explanatory tooltips, without editors having to manually add explanations every time.

history Letzte Änderung: 21.08.2026

Darstellung des Tooltipps im Frontend
This is how the tooltip looks in the frontend

How Does It Work?

Editors maintain a central list of technical terms and their explanations in the TYPO3 backend. Whenever one of these terms appears in the body text of a content element, the extension automatically detects it, visually highlights it (with a dotted underline), and shows the matching explanation as a tooltip on mouseover – or on tap on mobile devices. Technically, the explanation is output as a title attribute in the HTML, so no additional JavaScript is needed for the display itself.

devices

Automatic replacement is deliberately limited to body text within <li> and <p> elements, so headings and other layout areas are not affected.

thumb_up Benefits

Benefits for Editors and Visitors

  • edit_note

    No repeated explaining: Technical terms don't need to be explained again in every single text.

  • checklist

    Consistent terminology: Explanations are maintained centrally and appear consistently across the whole website.

  • tune

    Full editorial control: Terms and explanations can be adjusted centrally, in one place, at any time.

  • devices

    Optimized for all devices: On mobile devices, the tooltip appears on tap instead of hover, keeping it usable on touch devices too.

  • accessibility_new

    Contributes to accessibility: Short, contextual explanations help people with cognitive impairments or without specialist knowledge, without disrupting reading flow.

  • extension

    Technically lean: Easy to configure, compatible with all common content elements, and fast on the frontend.

Installation

Setup is done in just a few steps.

  1. Install the extension via Composer: composer require wacon/tooltip

  2. Update the database and clear the system cache.

  3. Create a storage folder where all tooltip records will be kept.

  4. Include the extension's static TypoScript and set the storage folder's PID in the extension settings under "Tooltip".

  5. Create tooltip records – each with an ID (the text string to be replaced in body text), the visible term, and a short explanation.

Interested in the tooltip extension for your TYPO3 website?

We install and configure the extension for you, or develop custom TYPO3 extensions tailored to your requirements.

chat Free Consultation