Image Tooltip 3.2.1 is a JoomlaX package that turns article thumbnails or underlined phrases into rich image previews on hover, keyboard focus, or tap.

Think of it as two plugins that always work together:

• Content - Image Tooltip: reads {itooltip} in articles (and custom HTML modules that run content plugins) and builds the trigger plus the popup.
• Editor - Image Tooltip: toolbar button that inserts the shortcode so you do not have to type attributes by hand.

What you can do

• Show a large preview, title, body copy, and optional link from a small thumb
• Turn a phrase into a dashed underline trigger (type="text")
• Load title, excerpt, image, and link from a Joomla article ID (article="123")
• Pin a tip with a click or tap, then dismiss with Escape or an outside click
• Choose Dark, Light, Glass, or Brand themes per site or per tip
• Follow the cursor, or lock the tip above, below, left, or right of the trigger
• Resize local images to WebP under images/cache/image-tooltip (optional)

Built for modern Joomla

• Joomla 4, 5, and 6
• PHP 8.0 or later
• Native JavaScript (no jQuery)
• Respects prefers-reduced-motion

Before you install

• Joomla: 4.x, 5.x, or 6.x
• PHP: 8.0 or newer
• Content: standard articles, or modules that process content plugins
• Access: Super User or administrator to install plugins

Helpful

• GD or Imagick if you want local thumbs and tooltip images resized to WebP
• Site-relative image paths such as images/photo.jpg

Not required

• jQuery
• A custom component
• Remote image hosts (https URLs work, but they are not resized)

Step 1: Download

After purchase, download ImageTooltip_UNZIP.zip from your email or the Downloads section.

Step 2: Unzip on your computer

1. Extract ImageTooltip_UNZIP.zip.
2. Inside you should see:
   • pkg_image_tooltip_3.2.1.zip (install this one)
   • ReadMe.txt

Step 3: Install in Joomla

1. System > Install > Extensions
2. Upload pkg_image_tooltip_3.2.1.zip
3. System > Maintenance > Clear Cache

What the package installs

• Content - Image Tooltip
• Editor - Image Tooltip

The installer enables both. Do not unzip pkg_image_tooltip_3.2.1.zip before upload. Separate zips exist if you prefer to install the plugins one at a time.

1. Confirm System > Plugins shows Content - Image Tooltip and Editor - Image Tooltip as Enabled.
2. Open System > Plugins > Content - Image Tooltip.
3. On Behaviour, pick a default theme, placement, animation, show delay, click to pin, and link target.
4. On Article source, choose Inline or AJAX, excerpt length, Plain text or Safe HTML, whether to strip plugin syntax, and whether to include the article image and link.
5. On Design, set colours, max width, corner radius, and Tooltip image fit. Leave fit on Contain (full image) unless you want photos cropped to fill the panel.
6. Leave Cache resized images on Yes unless you must always serve original files.
7. Edit an article. Click Image Tooltip in the editor, or paste a shortcode (see Shortcode).
8. Save, clear cache, open the article, and hover or tap the trigger.

After an update from 3.0.5 or earlier, open Design and use Clear image cache or Remove broken files if old empty WebP files are still on disk.

Image trigger (default):

{itooltip title="Leather Tote" thumbsrc="images/photo.jpg" lgsrc="images/photo.jpg" thumbwidth="160" theme="dark" placement="follow"}Soft leather with brass hardware.{/itooltip}

Text trigger:

{itooltip type="text" text="mirrorless camera kit" lgsrc="images/camera.jpg" title="Mirrorless Kit" theme="glass" placement="top"}Compact body with travel-ready lenses.{/itooltip}

Joomla article as the source (content ID):

{itooltip article="123" type="text"}{/itooltip}

AJAX on hover (overrides the plugin default):

{itooltip article="123" type="text" load="ajax"}{/itooltip}

That loads the published article title, excerpt, intro or full image, and article URL. You can still set text, title, thumbsrc, lgsrc, content, or link to override any of those fields. Aliases: id="123" and contentid="123". Choose Inline or AJAX under Plugins > Content - Image Tooltip > Article source.

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

Legacy syntax

Older content still works:

{itooltip}Heritage Runner{end-link}images/photo.jpg{/itooltip}

Inner text between the tags becomes the tip body when you do not set content.

Use the Image Tooltip button in the article editor toolbar. Choose image or text trigger, optional Joomla article ID (type it or click Select), Article load (plugin default, Inline, or AJAX), theme, placement, thumb path, thumb width, large preview, float, title, body, optional link, and link label, then insert.

If the button is missing:

• Enable Editor - Image Tooltip under System > Plugins
• Confirm your editor layout includes extra buttons (TinyMCE: Set 2 / Set 3, or the plugin list)
• Hard-refresh the administrator after install

The button writes a ready {itooltip} block. You can still add optional attributes such as fit="cover" in the source afterwards.

Open System > Plugins > Content - Image Tooltip > Behaviour.

• Default theme: Dark, Light, Glass, or Brand. Override with theme on the shortcode.
• Default placement: Follow cursor, or Top / Bottom / Left / Right. Override with placement.
• Animation: Fade, Scale, Slide, or None.
• Show delay (ms): 0 to 800 before a hover tip appears.
• Click to pin: Yes keeps the tip open until Escape or an outside click. A second click on a linked trigger follows the URL. Touch devices always tap to pin.
• Link target: New tab or same window.

Shortcodes can override theme, placement, and animation on a single tip.

Open System > Plugins > Content - Image Tooltip > Article source.

• Load article content: Inline embeds the excerpt in the page. AJAX fetches it on first hover, focus, or tap. Override one tip with load="ajax" or load="inline".
• Article body: Intro text, full article, or both, then trimmed to the excerpt length.
• Article excerpt length: 80 to 600 characters (default 240) when you use article="ID" and leave the body empty.
• Article excerpt format: Plain text (default) or Safe HTML. Safe HTML keeps headings, links, lists, and emphasis, then closes any tags cut by the length limit.
• Allow images in excerpt: shown when format is Safe HTML. Lets sanitised images from the article body appear in the excerpt. Use article image is separate and still fills the tooltip photo from intro or full image fields.
• Strip content plugin syntax: Yes (default) removes codes such as {loadmoduleid 186} and {loadposition ...}. Nested {itooltip} tags are always removed. Plugins are never run inside the tip.
• Use article image: Yes fills empty thumbsrc / lgsrc from the article intro or full image.
• Link to article: Yes fills an empty link with the article URL.

Open System > Plugins > Content - Image Tooltip > Design.

Look

• Tooltip background, text colour, and accent colour
• Max width (default tip width in pixels)
• Corner radius
• Tooltip image fit: Contain (default) shows the full image. Cover fills the panel and may crop edges. Optional on one tip with fit="cover" or fit="contain".

Media cache

• Cache resized images: Yes (default) writes files under images/cache/image-tooltip. No uses the original URLs.
• WebP thumbnails: shown when cache is Yes. Local images are resized; remote https URLs are left unchanged.
• WebP quality: 40 to 100
• Clear image cache: deletes generated files
• Remove broken files: deletes empty or tiny cache files left by older versions

Thumbs with thumbwidth use a square box and never grow past the column width, so a row of icons stays even.

• type: image (default) or text
• article / id / contentid: Joomla article ID used as the tooltip source
• load: optional inline or ajax (default is the plugin Article source setting)
• thumbsrc / thumb: thumbnail path
• lgsrc / image: large preview (falls back to the thumb if omitted)
• thumbwidth / width: thumbnail size in pixels (square slot, max 800)
• tipwidth: tip max width override (max 720)
• fit: optional contain or cover (default is the plugin Design setting, Contain)
• title: tip heading
• content: tip body (or use inner shortcode text)
• text / trigger: label for text triggers
• float: left, right, or none
• theme: dark, light, glass, brand
• placement: follow, top, bottom, left, right
• animation: fade, scale, slide, none
• link / cta_url: HTTP(S), mailto, or tel
• cta_text / linktext: optional button label (default is the language string Open link)

Unknown attributes are ignored. javascript: and data: URLs are blocked.

The live demo at demo.joomlax.com/demo/utilities/image-tooltip shows product thumbs, floated editorial images, text triggers, anchored cards, and Joomla article-ID sources (inline and AJAX).

Hover or tap a trigger, pin with a click, press Escape to close, then view the Shortcode block under each example.

• Tip never appears

  • Enable Content - Image Tooltip. Confirm matching {itooltip} and {/itooltip} (or {end-itooltip}). A shortcode with no image, title, body, or link does not open a tip.

• Broken or empty popup image

  • Install 3.2.0, then Design > Remove broken files or Clear image cache. Palette PNGs used to write 0-byte WebP files. Turn cache Off only if you must skip generated files.

• Circle or logo is cropped in the panel

  • Leave Tooltip image fit on Contain, or add fit="contain". Cover fills a 4:3 box and crops the edges.

• One thumb looks larger than the others

  • Use the same thumbwidth on every {itooltip}. Icons that are still a plain <img width="200"> fill the column and will look bigger.

• First thumb does nothing in Firefox

  • Install 3.1.0 or later. Bootstrap/Astroid often set [role=tooltip] to position:absolute, which breaks tips inside animated sections. 3.0.10 also fixed 0px thumbs in JCE columns. Hard-refresh so image-tooltip.css?3.1.0 loads.

• Tip flashes or will not stay open

  • Install 3.0.7 or later and hard-refresh CSS/JS. Templates that hide elements until animation (for example Astroid) need the updated hover logic.

• Editor button missing

  • Enable Editor - Image Tooltip and include it in the editor button set.

• Old design remains

  • Clear Joomla, template, CDN, and browser caches. Asset query strings follow the plugin version (currently 3.2.0).

• Article ID tooltip is empty

  • The article must be published, inside its publish dates, and in an access level the visitor can view. Use the numeric content ID from Content > Articles. Nested {itooltip} inside that article is stripped so tips cannot recurse.

• Link does not open on the first click

  • Click to pin is on: the first click holds the tip. Use Open link, click again, or turn Click to pin Off.

Support: support.joomlax.com

Documentation: joomlax.com/documentation/image-tooltip

Demo: demo.joomlax.com/demo/utilities/image-tooltip

Include Joomla version, PHP version, Image Tooltip version, and whether the image is a local file or a remote URL.