Image Tooltip 3.1.3 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")
• 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.1.3.zip (install this one)
   • ReadMe.txt

Step 3: Install in Joomla

1. System > Install > Extensions
2. Upload pkg_image_tooltip_3.1.3.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.1.3.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 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.
5. Leave Cache resized images on Yes unless you must always serve original files.
6. Edit an article. Click Image Tooltip in the editor, or paste a shortcode (see Shortcode).
7. 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}

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, 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 > 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
• 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, and anchored cards.

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.1.3, 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.1.1).

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