Get Started

Text Image Tooltip 3.0 is a modern Joomla content plugin for Joomla 4, Joomla 5, and Joomla 6. Turn underlined phrases (or optional thumbnails) into rich image previews on hover, focus, or tap — with themes, placement, sticky tips, WebP caching, and an editor insert button.

Key Highlights:

• Text-first shortcodes with legacy {end-link} support
• Dark, Light, Glass, and Brand themes
• Follow-cursor or anchored placement
• Sticky click / touch pin with Escape dismiss
• WebP resize cache for local images
• Editor toolbar button for one-click insert
• Vanilla JS — no jQuery

Install pkg_text_image_tooltip_3.0.zip through System > Install > Extensions. The package installs both plugins:

• Content - Text Image Tooltip
• Editor - Text Image Tooltip

After installation, confirm both are enabled under System > Manage > Plugins (search for Text Image Tooltip). Clear Joomla, template, CDN, and browser caches after installing or updating.

Do not unzip the package before upload. Separate zips are also available: plg_content_txttooltip_3.0.zip and plg_editors-xtd_txttooltip_3.0.zip.

Use the Text Image Tooltip button in the article editor toolbar to insert a shortcode without typing attributes by hand. Choose text or image trigger, theme, placement, widths, title, body copy, and optional link, then click Insert shortcode.

If the button is missing, enable Editor - Text Image Tooltip under Plugins and confirm your editor allows the button.

Add a text-first tooltip anywhere in article content:

{txttooltip text="leather tote" lgsrc="images/photo.jpg" title="Product name" theme="dark" placement="follow"}Short supporting text{/txttooltip}

Text triggers show a dashed underline label. Image triggers use type="image" with thumbsrc. Optional link turns the trigger into a URL and adds an Open link action inside the tip.

Legacy syntax still works:

{txttooltip}TRIGGER{end-link}images/photo.jpg{/txttooltip}

Closing tag may be {/txttooltip} or {end-txttooltip}.

Open System > Manage > Plugins > Content - Text Image Tooltip.

• Default theme — Dark, Light, Glass, or Brand
• Default placement — Follow cursor, or Top / Bottom / Left / Right
• Animation — Fade, Scale, Slide, or None
• Show delay (ms) — 0–800ms before hover tips appear
• Click to pin — Keep tips open until Escape or outside click; second click on a linked tip follows the URL
• Link target — New tab or same window for tip links

Shortcodes can override theme, placement, and animation per tip.

• Tooltip background / text / accent colour — site-wide design defaults
• Max width — default tip width in pixels
• Corner radius — panel rounding
• WebP thumbnails — resize local images and cache under images/cache/text-image-tooltip
• WebP quality — 40–100

Use site-relative paths such as images/photo.jpg. Remote https URLs are supported but are not resized. Spacing stays correct for link-only, title-only, image+link, and full tip layouts.

• text — underlined trigger label (default trigger type)
• lgsrc / image — large preview image
• thumbsrc / thumb — thumbnail for type="image" (falls back to lgsrc if omitted)
• thumbwidth / width — thumbnail width in pixels
• tipwidth — tip max width override
• title — tip heading
• content — tip body (or use shortcode inner text)
• type — text (default) or image
• float — left, right, or none
• theme — dark, light, glass, brand
• placement — follow, top, bottom, left, right
• animation — fade, scale, slide, none
• link — optional HTTP(S), mailto, or tel URL

• Triggers are real buttons or links with keyboard focus styles
• Tips use role="tooltip" and aria-expanded
• Escape closes a pinned tip
• External links use noopener noreferrer
• Unsafe schemes such as javascript: and data: are blocked
• Images support lazy loading
• Reduced-motion preferences disable tip transitions
• Ctrl/Cmd/Shift-click on linked triggers opens the URL without pinning

• Tip never appears: Confirm the content plugin is enabled and the shortcode uses matching {txttooltip} / {/txttooltip} tags (or {end-txttooltip}). Empty shortcodes with no image, title, body, or link do not open a tip.
• Editor button missing: Enable Editor - Text Image Tooltip under Plugins.
• Image missing: Use a site-relative path such as images/photo.jpg or a full https URL.
• Old design remains: Clear Joomla, template, CDN, and browser caches after updating to 3.0.
• Tip hidden by template: Version 3 adds Bootstrap-compatible show class handling for templates that hide [role=tooltip] elements.
• Link does not navigate on first click: Sticky click pins the tip first. Use Open link, click again, or disable sticky click.