Plugin

Tooltip

Image Tooltip

Image Tooltip Plugin for Joomla

Buy Now — From $9 Explore Features

Instant access after purchaseOne-click Joomla updatesLifetime option available

30-day money-back guarantee

3.4K+ downloadsv3.2.15.0 rating

Works with

Joomla 4 Joomla 5 Joomla 6

Version 3.2.1: 27 August 2026

Open link hover keeps the panel text colour, so Helix and other template a:hover rules cannot turn the CTA brand-blue
Article source: strip content plugin syntax (default Yes), excerpt format Plain text or Safe HTML, and optional images inside Safe HTML
Safe HTML is sanitised and re-closed after truncation so unclosed tags cannot break the page
Use a Joomla article as the tooltip source with article="123" (aliases: id, contentid)
Article title, intro excerpt, intro or full image, and article URL fill in when those shortcode fields are empty
Unpublished or restricted articles stay hidden. Explicit title, body, image, or link on the shortcode still override the article
Editor button: optional article ID field and Select picker
Plugin option for article excerpt length (80 to 600 characters, default 240)
Two article load modes in the plugin: Inline (with the page) or AJAX on first hover. Shortcodes can override with load="ajax" or load="inline"
Backend Article source options: intro / full / both, excerpt length, use article image, and link to article

Version 3.1.3: 19 August 2026

Hover follows the pointer, so a fading demo section cannot leave the tip dead under a still cursor. The first open is immediate
Tips stay open when the panel moves to body or the layout shifts. Firefox uses the element under the pointer, not a null relatedTarget
Tip panels force position:fixed so Bootstrap/Astroid [role=tooltip] { position:absolute } cannot park the tip inside a transformed section
Anchored tips flip side if the panel would overlap the trigger. Right or left alignment uses margins, not CSS float
Thumbs keep their natural aspect ratio (no forced 1:1 box). Tooltip images use Contain by default; Cover is optional via Design or fit="contain" / fit="cover"
Thumbs with thumbwidth keep a real pixel width so grid icons can receive hover in Firefox. They are not loading=lazy
Cache resized images switch (default Yes) under Design, plus Clear image cache and Remove broken files
Empty or tiny WebP cache files are rejected. Palette PNGs convert to truecolor before WebP. Local media URLs are site-relative
Popup images load eagerly. Translatable Open link label, plus cta_text / linktext on the shortcode. Legacy TRIGGER{end-link}image.jpg and {end-itooltip} closers still work
Content plugin, editor button, and package version numbers stay in sync

Version 3.0: 17 July 2026

Release Date: 17 July 2026

Complete Rebuild

Full rebuild for Joomla 4, Joomla 5, and Joomla 6
Namespaced service-provider architecture with Web Asset Manager loading
Vanilla JavaScript only — jQuery and TimThumb / image.php removed
Install package pkg_image_tooltip_3.0.zip includes the content plugin and editor button

New Features

Four themes — Dark, Light, Glass, and Brand, with per-tip shortcode overrides
Placement modes — Follow cursor, or anchor top / bottom / left / right
Animations — Fade, Scale, Slide, or None, with reduced-motion support
Sticky click & touch — Click/tap to pin; Escape or outside click to dismiss
Image or text triggers — Thumbnails or underlined text labels, with optional float left/right
WebP thumbnail cache — Local images are resized and cached under images/cache/image-tooltip
Editor button — Insert

DemoExample 2 - Editorial Float

Float thumbnails left or right inside article copy. Light theme tooltips keep editorial pages clean and readable.


 Surrounding copy can wrap around the floated trigger so product callouts feel native inside long-form content.

DemoExample 3 - Text Trigger

Turn any phrase into a dotted underline trigger. Perfect for glossaries, product mentions, and documentation callouts.


Readers can explore the  without leaving the paragraph.

DemoExample 4 - Anchored Card

Use placement="right" (or top, bottom, left) when a stable card feels more intentional than a cursor-follow tip.

DemoExample 5 - Watch Gallery

Combine multiple shortcodes in one example for product strips, lookbooks, and catalogue previews.

DemoExample 6 - Rich Product Card

One tip can carry a larger preview, longer multi-line body copy, a CTA link, and a wider tip panel — ideal for detailed product storytelling.

DemoExample 7 - Joomla article source

Point the tooltip at a published article ID. Title, intro excerpt, intro image, and the article URL fill in automatically. Override any field on the shortcode if you need to.


Hover the linked title to preview article #112: Missouri Bans Student-Teacher Social Networking (opens in a new window)

Missouri Bans Student-Teacher Social Networking (opens in a new window)

DemoExample 8 - AJAX article source

The same article ID can load on first hover instead of in the page HTML. Set this site-wide under Plugins > Content - Image Tooltip > Article source, or override one tip with load="ajax".


Hover to fetch article #112 over AJAX:

</code> shortcodes from the article editor toolbar</li>

<li><strong>Design controls</strong> — Background, text, accent colour, max width, and corner radius</li>

<li><strong>Rich tip content</strong> — Title, multi-line body, large preview image, and optional CTA link</li>

</ul>

<p><strong>Improvements</strong></p>

<ul>

<li>Safer URL handling for media and links (blocks javascript/data schemes)</li>

<li>Keyboard focus styles and <code>aria-expanded</code> state</li>

<li>Bootstrap/Helix-compatible <code>show</code> class so tips are not hidden by template CSS</li>

<li>Responsive behaviour — floated triggers unwrap on small screens; panels stay inside the viewport</li>

<li>Lazy loading and async decoding for tip images</li>

</ul>

<p><strong>Removed</strong></p>

<ul>

<li>Legacy TimThumb resizing helper</li>

<li>Deprecated <code>JFactory</code> / <code>JURI</code> / <code>JHtml</code> usage</li>

<li>jQuery sticky tooltip script</li>

</ul>

<hr /><p>Version 2.5: 19 November 2025</p><p><strong>Release Date:</strong> 19 November 2025</p>

<div><strong>Joomla 6 Compatibility</strong></div>

<ul>

<li>Full compatibility with Joomla 6.0 while maintaining backward compatibility with Joomla 4 and 5</li>

<li>Enhanced security with path validation and input sanitization</li>

<li>Modern PHP 8+ support with type hints and PSR-12 coding standards</li>

</ul>

<p><strong>New Features</strong></p>

<ul>

<li><strong>Shadow Configuration</strong> - Enable/disable and fully customize tooltip shadows with horizontal/vertical offset, blur, spread, and color options</li>

<li><strong>Tooltip Position Control</strong> - Choose from auto (follow mouse), top, bottom, left, or right positioning</li>

<li><strong>Lazy Loading Implementation</strong> - Full lazy loading support for tooltip images to improve page performance</li>

<li><strong>Enhanced Link Support</strong> - Fixed text tooltip links to work properly with clickable links</li>

<li><strong>Shortcode Examples Tab</strong> - Built-in shortcode examples with one-click copy functionality</li>

</ul>

<p><strong>Improvements</strong></p>

<ul>

<li>Removed unnecessary margin-bottom from tooltip images</li>

<li>Removed top border from tooltip content area for cleaner design</li>

<li>Improved link handling for text tooltips</li>

<li>Enhanced JavaScript event handling for better link navigation</li>

<li>Updated CSS for better visual consistency</li>

</ul>

<p><strong>Bug Fixes</strong></p>

<ul>

<li>Fixed text tooltip links not working properly</li>

<li>Fixed margin-bottom causing design issues</li>

<li>Fixed top border appearing unnecessarily in tooltip content</li>

</ul>

<hr /><p>Version 2.4: 14 September 2025</p><p><strong>Release Date:</strong> September 14, 2025</p>

<p><strong>Joomla 5 Compatibility</strong></p>

<ul>

<li>Full compatibility with Joomla 5.0 while maintaining backward compatibility with Joomla 4</li>

<li>Modern PHP 8+ support with type hints and PSR-12 coding standards</li>

<li>Enhanced security with path validation and input sanitization</li>

</ul>

<p><strong>New Features</strong></p>

<ul>

<li><strong>WebP Image Support</strong> - Convert images to modern WebP format for better performance</li>

<li><strong>Lazy Loading</strong> - Optional lazy loading support for improved page performance</li>

<li><strong>Configurable Tooltip Positioning</strong> - Choose from top, bottom, left, right, or auto positioning</li>

<li><strong>Tooltip Delay Settings</strong> - Customizable delay settings for better user experience</li>

<li><strong>Minified Assets Support</strong> - Use minified CSS/JS files by default with option for full versions</li>

<li><strong>Image Caching System</strong> - Intelligent caching system for faster loading</li>

<li><strong>Responsive Design</strong> - Perfect display on all screen sizes with mobile-first approach</li>

<li><strong>Dark Mode Support</strong> - Automatic dark mode detection and styling</li>

<li><strong>High Contrast Mode</strong> - Enhanced visibility for accessibility</li>

<li><strong>Reduced Motion Support</strong> - Respects user's motion preferences for better accessibility</li>

</ul>

<p><strong>Technical Improvements</strong></p>

<ul>

<li>Modernized PHP - Complete rewrite with modern PHP 8+ features, type hints, and PSR-12 coding standards</li>

<li>Enhanced Security - Comprehensive path validation, input sanitization, and XSS protection</li>

<li>Improved Performance - Optimized image processing with efficient file operations</li>

<li>Better Error Handling - Comprehensive error logging and graceful fallbacks</li>

<li>Modern Code Standards - Clean, maintainable code following Joomla 5 best practices</li>

<li>Enhanced Accessibility - Full keyboard navigation, ARIA support, and screen reader compatibility</li>

</ul>

<p><strong>Improvements</strong></p>

<ul>

<li>Refactored JavaScript with modern ES6+ features and strict mode</li>

<li>Updated CSS with modern design principles and responsive breakpoints</li>

<li>Improved XML manifest with better parameter organization and modern field types</li>

<li>Enhanced helper class with robust image processing and caching</li>

<li>Better integration with Joomla's asset management system</li>

<li>Improved compatibility with various Joomla templates</li>

<li>Fixed image resizing for certain image formats</li>

<li>Better error handling for missing images</li>

<li>Improved tooltip animation performance</li>

<li>Enhanced mobile responsiveness</li>

</ul>

<p><strong>Bug Fixes</strong></p>

<ul>

<li>Fixed URL construction - Fixed double base URL issue in image paths</li>

<li>Fixed image processing - Improved image resizing and format conversion</li>

<li>Fixed memory management - Better memory usage for large images</li>

<li>Fixed cross-browser compatibility - Fixed issues with older browsers</li>

<li>Fixed mobile responsiveness - Improved tooltip positioning on mobile devices</li>

<li>Fixed JavaScript array handling - Resolved stickytooltip.stickynotice1.join error</li>

<li>Fixed regex pattern in parseOptions method - Proper key-value parsing</li>

</ul>

<p><strong>Security Enhancements</strong></p>

<ul>

<li>Path Validation - Comprehensive validation of image paths to prevent directory traversal</li>

<li>Input Sanitization - Proper sanitization of all user inputs</li>

<li>XSS Prevention - HTML escaping for all output</li>

<li>File Type Validation - Strict validation of image file types</li>

<li>Directory Protection - Automatic creation of security index.html files</li>

</ul>

<p><strong>Accessibility Improvements</strong></p>

<ul>

<li>Keyboard Navigation - Full keyboard support (Enter, Space, Escape keys)</li>

<li>ARIA Attributes - Proper ARIA labels and roles for screen readers</li>

<li>Focus Management - Improved focus indicators and management</li>

<li>High Contrast Mode - Enhanced visibility in high contrast mode</li>

<li>Reduced Motion - Respects user's motion preferences</li>

<li>Screen Reader Support - Better compatibility with assistive technologies</li>

</ul>

<p><strong>Technical Changes</strong></p>

<ul>

<li>PHP Requirements - Minimum PHP 7.4 (PHP 8.0+ recommended)</li>

<li>Joomla Compatibility - Joomla 4.0+ and Joomla 5.0+</li>

<li>Dependencies - Uses Joomla's native Image class and jQuery</li>

<li>File Structure - Reorganized files with better separation of concerns</li>

<li>Code Standards - PSR-12 compliant PHP code</li>

</ul>

<hr /><p>Version 2.3: 11 December 2023</p><ul>

<li>Supports Joomla 5 without Backward Compatibility Plugin</li>

</ul>

<hr /><p>Version 2.2: 13 February 2023</p><ul>

<li>New and easy to use shortcode</li>

<li>Background color change of tooltip added</li>

<li>Option to open url in a new tab added</li>

</ul>

<hr /><p>Version 2.1: 11 February 2023</p><ul>

<li>Removed option to load jQuery in body</li>

<li>Modification to plugin parameters</li>

</ul>

<hr /><p>Version 2.0: 01 February 2021</p><ul>

<li>Supports Joomla 4</li>

</ul>

<hr /><p>Version 1.9: 01 February 2017</p><ul>

<li>Joomla Update System Integrated</li>

</ul></div></div></div><span id="exman-demo-start" class="exman-demo-start" aria-hidden="true"></span>

<section class="tp-section tp-animate tp-section--article-example"><div class="tp-demo-box tp-demo-box--article tp-demo-box--tabbed"><div class="tp-demo-box__chrome"><span class="tp-demo-box__traffic" role="group" aria-label="Preview window controls"><button type="button" class="tp-demo-box__dot tp-demo-box__dot--close" aria-label="Hide browser chrome" title="Hide browser chrome"></button><button type="button" class="tp-demo-box__dot tp-demo-box__dot--min" aria-label="Minimize preview to bottom" title="Minimize to bottom"></button><button type="button" class="tp-demo-box__dot tp-demo-box__dot--max" aria-label="Fullscreen preview" title="Fullscreen"></button></span><span class="tp-demo-box__label"><span class="tp-demo-box__label-prefix">Demo</span><span class="tp-demo-box__label-name">Example 1 - Product Preview</span></span></div><div class="tp-demo-box__tabs" data-demo-tabs><div class="tp-demo-box__tablist" role="tablist" aria-label="Example views"><button type="button" class="tp-demo-box__tab is-active" role="tab" id="tp-demo-tab-1-demo-btn" aria-selected="true" aria-controls="tp-demo-tab-1-demo" data-tab="demo">Demo</button><button type="button" class="tp-demo-box__tab" role="tab" id="tp-demo-tab-1-shortcode-btn" aria-selected="false" aria-controls="tp-demo-tab-1-shortcode" data-tab="shortcode" tabindex="-1">Shortcode</button></div><div class="tp-demo-box__panels"><div class="tp-demo-box__panel is-active" role="tabpanel" id="tp-demo-tab-1-demo" aria-labelledby="tp-demo-tab-1-demo-btn" data-panel="demo"><p>Hover or tap the product thumbnail to open a rich image tooltip. Click once to pin it, click outside or press Escape to dismiss. Local thumbs are resized and cached as WebP.</p>

<p>{itooltip title="Leather Tote" content="Soft full-grain leather with brass hardware. Hover to preview the full product shot." thumbsrc="images/cloud/Bag__leather-tote.jpg" lgsrc="images/cloud/Bag__leather-tote.jpg" thumbwidth="160" float="right" theme="dark" placement="follow" link="https://joomlax.com"}

Leather Tote
Soft full-grain leather with brass hardware. Hover to preview the full product shot.
Open link (opens in a new window)

Studio Headphones
Closed-back monitoring headphones with natural tonal balance for long editing sessions.

Studio Headphones
Closed-back monitoring headphones with natural tonal balance for long editing sessions.

Mirrorless Kit
Compact body, fast autofocus, and travel-ready lenses for creators on the move.

Mirrorless Kit
Compact body, fast autofocus, and travel-ready lenses for creators on the move.

Aviator Sunglasses
Gold-frame aviators with polarized lenses. Anchored tip stays beside the trigger instead of following the cursor.

Aviator Sunglasses
Gold-frame aviators with polarized lenses. Anchored tip stays beside the trigger instead of following the cursor.

Leather Classic
Warm leather strap with a clean dial for everyday wear.

Steel Chronograph
Polished steel case with chronograph subdials for precision timing.

Signature Scent
Glass-bottle fragrance with layered citrus and amber notes.

Leather Classic
Warm leather strap with a clean dial for everyday wear.

Steel Chronograph
Polished steel case with chronograph subdials for precision timing.

Signature Scent
Glass-bottle fragrance with layered citrus and amber notes.

Heritage Runner
Breathable knit upper with a responsive foam midsole tuned for all-day city miles. Wide toe box, reflective heel tab, and a durable rubber outsole for wet pavement grip. Available in sizes 36–46. Includes spare laces and a travel pouch. Free exchanges within 30 days. Ships in recyclable packaging.
Open link (opens in a new window)

Heritage Runner
Breathable knit upper with a responsive foam midsole tuned for all-day city miles. Wide toe box, reflective heel tab, and a durable rubber outsole for wet pavement grip. Available in sizes 36–46. Includes spare laces and a travel pouch. Free exchanges within 30 days. Ships in recyclable packaging.
Open link (opens in a new window)

Missouri Bans Student-Teacher Social Networking

New Delhi, Aug 2: Missouri recently banned student-teacher Facebook friendships under a law preventing students from having social relationships with their teachers. The law specifically prevents ‘exclusive’ access to students, which bans u...

Open link (opens in a new window)

Missouri Bans Student-Teacher Social Networking

New Delhi, Aug 2: Missouri recently banned student-teacher Facebook friendships under a law preventing students from having social relationships with their teachers. The law specifically prevents ‘exclusive’ access to students, which bans u...

Open link (opens in a new window)

Loading

Image Tooltip

Company

Services

Support

Terms

Mobile Menu

Image Tooltip

Company

Services

Support

Terms

Mobile Menu

Login