1a:I[32743,["/documentation/_next/static/chunks/3fntmmi971322.js","/documentation/_next/static/chunks/1-v5_nhgzu2e0.js"],"GuideScreen"] 22:I[27201,["/documentation/_next/static/chunks/3fntmmi971322.js"],"IconMark"] 1b:T57c,

Image Tooltip 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

1c:T47a,

Confirm System > Plugins shows Content - Image Tooltip and Editor - Image Tooltip as Enabled.
Open System > Plugins > Content - Image Tooltip.
On Behaviour, pick a default theme, placement, animation, show delay, click to pin, and link target.
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.
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.
Leave Cache resized images on Yes unless you must always serve original files.
Edit an article. Click Image Tooltip in the editor, or paste a shortcode (see Shortcode).
Save, clear cache, open the article, and hover or tap the trigger.

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

1d:T634,

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.

1e:T91b,

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.

1f:T473,

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.

20:T5f5,

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.

21:T961,

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 the latest version, 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 the latest version. Bootstrap/Astroid often set [role=tooltip] to position:absolute, which breaks tips inside animated sections. It also fixes 0px thumbs in JCE columns. Hard-refresh so image-tooltip.css?X.x loads.
Tip flashes or will not stay open
- Install the latest version 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 .
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.

12:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"headline\":\"Image Tooltip: Demo page\",\"description\":\"The live demo at demo.joomlax.com/image-tooltip shows product thumbs, floated editorial images, text triggers, anchored cards, and Joomla...\",\"url\":\"https://joomlax.com/documentation/image-tooltip/demo-page\",\"isPartOf\":{\"@type\":\"WebSite\",\"name\":\"JoomlaX Documentation\",\"url\":\"https://joomlax.com/documentation\"},\"about\":{\"@type\":\"SoftwareApplication\",\"name\":\"Image Tooltip\",\"applicationCategory\":\"BusinessApplication\",\"operatingSystem\":\"Joomla\"}},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Documentation\",\"item\":\"https://joomlax.com/documentation\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Tooltip\",\"item\":\"https://joomlax.com/documentation/image-tooltip/getting-started\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Demo page\",\"item\":\"https://joomlax.com/documentation/image-tooltip/demo-page\"}]}]}"}}],["$","$L1a",null,{"name":"Image Tooltip","alias":"image-tooltip","section":"demo-page","version":"3.2.4","downloadUrl":"https://joomlax.com/image-tooltip#download","sections":[{"id":"introduction","label":"Introduction","icon":"fa-info-circle","html":"$1b","image":"","excerpt":"Image Tooltip is a JoomlaX package that turns article thumbnails or underlined phrases into rich image previews on hover, keyboard focus,..."},{"id":"requirements","label":"Requirements","icon":"fa-server","html":"

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)

","image":"","excerpt":"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:..."},{"id":"installation","label":"Installation","icon":"fa-download","html":"

Step 1: Download

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

Step 2: Unzip on your computer

Extract ImageTooltip_UNZIP.zip.
Inside you should see:\n
- pkg_image_tooltip_X.x.zip (install this one)
- ReadMe.txt
\n

Step 3: Install in Joomla

System > Install > Extensions
Upload pkg_image_tooltip_X.x.zip
System > Maintenance > Clear Cache

What the package installs

Content - Image Tooltip
Editor - Image Tooltip

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

","image":"","excerpt":"Step 1: Download After purchase, download ImageTooltip_UNZIP.zip from your email or the Downloads section . Step 2: Unzip on your compute..."},{"id":"first-time-setup","label":"First-time setup","icon":"fa-clipboard-check","html":"$1c","image":"","excerpt":"Confirm System > Plugins shows Content - Image Tooltip and Editor - Image Tooltip as Enabled. Open System > Plugins > Content - Image Too..."},{"id":"shortcode","label":"Shortcode","icon":"fa-code","html":"$1d","image":"","excerpt":"Image trigger (default): {itooltip title=\"Leather Tote\" thumbsrc=\"images/photo.jpg\" lgsrc=\"images/photo.jpg\" thumbwidth=\"160\" theme=\"dark..."},{"id":"editor-button","label":"Editor button","icon":"fa-pen-to-square","html":"

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.

","image":"","excerpt":"Use the Image Tooltip button in the article editor toolbar. Choose image or text trigger, optional Joomla article ID (type it or click Se..."},{"id":"behaviour","label":"Behaviour","icon":"fa-cog","html":"$1e","image":"","excerpt":"Open System > Plugins > Content - Image Tooltip > Behaviour . Default theme: Dark, Light, Glass, or Brand. Override with theme on the sho..."},{"id":"design-and-cache","label":"Design and cache","icon":"fa-palette","html":"$1f","image":"","excerpt":"Open System > Plugins > Content - Image Tooltip > Design . Look Tooltip background, text colour, and accent colour Max width (default tip..."},{"id":"attributes","label":"Attributes","icon":"fa-sliders","html":"$20","image":"","excerpt":"type : image (default) or text article / id / contentid : Joomla article ID used as the tooltip source load : optional inline or ajax (de..."},{"id":"demo-page","label":"Demo page","icon":"fa-eye","html":"

The live demo at demo.joomlax.com/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.

","image":"","excerpt":"The live demo at demo.joomlax.com/image-tooltip shows product thumbs, floated editorial images, text triggers, anchored cards, and Joomla..."},{"id":"troubleshooting","label":"Troubleshooting","icon":"fa-tools","html":"$21","image":"","excerpt":"Tip never appears Enable Content - Image Tooltip. Confirm matching {itooltip} and {/itooltip} (or {end-itooltip} ). A shortcode with no i..."},{"id":"support","label":"Support","icon":"fa-life-ring","html":"

Support: support.joomlax.com

Documentation: joomlax.com/documentation/image-tooltip

Demo: demo.joomlax.com/image-tooltip

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

","image":"","excerpt":"Support: support.joomlax.com Documentation: joomlax.com/documentation/image-tooltip Demo: demo.joomlax.com/image-tooltip Include Joomla v..."}]}]] 15:null 19:[["$","title","0",{"children":"Demo page - Image Tooltip Documentation - JoomlaX"}],["$","meta","1",{"name":"description","content":"The live demo at demo.joomlax.com/image-tooltip shows product thumbs, floated editorial images, text triggers, anchored cards, and Joomla..."}],["$","meta","2",{"name":"application-name","content":"JoomlaX Documentation"}],["$","meta","3",{"name":"robots","content":"index, follow"}],["$","link","4",{"rel":"canonical","href":"https://joomlax.com/documentation/image-tooltip/demo-page"}],["$","meta","5",{"property":"og:title","content":"Demo page - Image Tooltip Documentation - JoomlaX"}],["$","meta","6",{"property":"og:description","content":"The live demo at demo.joomlax.com/image-tooltip shows product thumbs, floated editorial images, text triggers, anchored cards, and Joomla..."}],["$","meta","7",{"property":"og:url","content":"https://joomlax.com/documentation/image-tooltip/demo-page"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary"}],["$","meta","10",{"name":"twitter:title","content":"Demo page - Image Tooltip Documentation - JoomlaX"}],["$","meta","11",{"name":"twitter:description","content":"The live demo at demo.joomlax.com/image-tooltip shows product thumbs, floated editorial images, text triggers, anchored cards, and Joomla..."}],["$","link","12",{"rel":"icon","href":"https://joomlax.com/documentation/favicon.png"}],["$","link","13",{"rel":"apple-touch-icon","href":"https://joomlax.com/documentation/joomalx-icon.png"}],["$","$L22","14",{}]]