Contact
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.

Last updated: 21.08.2026

Tooltip displayed on the 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.

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

Benefits

Benefits for Editors and Visitors

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

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

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

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

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

  • 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.

Free Consultation