Inline Tooltip

Add inline tooltips to text using a rich-text format

Last modified: April 22, 2026

link Extension name

t2/inline-tooltip

This extension registers a rich-text format that allows editors to select any word or phrase and attach a tooltip to it — similar to how bold or italic formatting works. On hover or keyboard focus, a small bubble appears above the text showing the tooltip content.

The tooltip trigger is rendered as:

<span class="t2-inline-tooltip" data-tooltip="Your tooltip text">word or phrase</span>

The extension also adds an accessibility layer: a visually hidden <span role="tooltip"> element is injected next to each trigger and connected via aria-describedby, so screen readers announce the tooltip text correctly.

link Usage

Select a word or phrase in any rich-text block (e.g. Paragraph, Heading).
Click the Inline tooltip button (speech bubble icon) in the toolbar.
Type your tooltip text in the popover and click Apply.
To remove a tooltip, place the cursor inside the formatted text, open the popover, and click Remove.

link Keyboard support

Enter in the tooltip text field applies the tooltip.
Escape closes the popover without saving.
The trigger span receives tabindex="0" so keyboard users can focus it and see the bubble via the CSS :focus rule.

link Accessibility

The extension respects the prefers-reduced-motion media query — the tooltip bubble appears instantly with no transition when the user has reduced motion enabled.

A visually hidden <span role="tooltip"> element is injected next to each trigger on the frontend, allowing screen readers to announce the tooltip content via aria-describedby.

link wp_kses

The extension automatically adds data-tooltip to the list of allowed attributes on <span> elements so that wp_kses does not strip the tooltip data when post content is saved.