Text Image Tooltip

Introduction

Text Image ToolTip is a powerful Joomla content plugin that allows you to add image preview tooltips to your Joomla content with simple shortcodes. When users hover over text links, they see a preview of the associated image without leaving the page. Perfect for galleries, product showcases, and visual content enhancement.

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• Automatic Image Resizing & Caching
• WebP Format Support
• Built-in Shortcode Examples Tab
• Enhanced Accessibility (WCAG Compliant)
• Performance Optimized with WebAssetManager
• Lazy Loading Support

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: TextImageTooltip_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the TextImageTooltip_UNZIP.zip package. After unzipping, you will find the following contents:

• plg_content_txttooltip_X.x.zip: This is the installation file compatible with Joomla 4.x, 5.x, and 6.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to Extensions > Manage > Install, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file (plg_content_txttooltip_X.x.zip), then click "Upload and Install."

A success message will be displayed once the installation is complete.

Enabling the Plugin

After installation, navigate to Extensions > Plugins, search for "Content - Text Image ToolTip", and click on it to enable and configure the plugin.

General Settings

Access the plugin settings by navigating to Extensions > Plugins, and find Content - Text Image ToolTip in the list.

General Settings

• Resize Image By: Choose how to resize images for tooltip display (default is Height).
  • Height: Resize images by height, maintaining aspect ratio
  • Width: Resize images by width, maintaining aspect ratio
  • Both: Resize images to exact height and width dimensions
• Image Height (px): Set the height of tooltip images in pixels (default is 200). Only visible when "Resize Image By" is set to Height or Both.
• Image Width (px): Set the width of tooltip images in pixels (default is 300). Only visible when "Resize Image By" is set to Width or Both.

Image Settings

Image Settings

• Enable WebP Support: Convert images to WebP format for better performance and smaller file sizes (default is No). Requires WebP support on your server.
• Image Quality: Set image quality for resized images from 1-100 (default is 85). Higher values mean better quality but larger file size.
• Enable Lazy Loading: Load tooltip images only when needed for better performance (default is No). Recommended for pages with many tooltips.

Display Settings

Display Settings

• Tooltip Position: Set the default position for tooltip display (default is Auto).
  • Auto: Follow mouse cursor with automatic edge detection
  • Top: Display above the link
  • Bottom: Display below the link
  • Left: Display to the left of the link
  • Right: Display to the right of the link
• Tooltip Delay (ms): Delay before showing tooltip in milliseconds (default is 300). Prevents tooltips from appearing too quickly on accidental hovers.
• Enable Accessibility Features: Add ARIA attributes and keyboard navigation support (default is Yes). Improves compatibility with screen readers and ensures WCAG compliance.

Advanced Settings

Advanced Settings

• Use Minified Assets: Use minified CSS and JavaScript files for better performance (default is Yes). Set to No for debugging purposes.
• Cache Resized Images: Cache resized images for better performance (default is Yes). Resized images are stored in images/txttooltip_plugin/ directory.

Shortcode Usage

Shortcode Examples Tab

The plugin includes a built-in Shortcode Examples & Usage tab in the plugin configuration with 10+ ready-to-use examples. Simply click "Copy" on any example to copy it to your clipboard, then paste it into your content.

Syntax - How to Use

Here is the syntax to integrate image tooltips into your content. Write the code in your article where you want to show the tooltip.

Basic Tooltip

{txttooltip}Click here{end-link}images/example.jpg{end-txttooltip}

Tooltip with Image Path

{txttooltip}View Image{end-link}images/gallery/photo.jpg{end-txttooltip}

Tooltip in Paragraph

<p>Lorem ipsum dolor sit amet, {txttooltip}consectetur{end-link}images/demo.jpg{end-txttooltip} adipiscing elit.</p>

Multiple Tooltips

This is {txttooltip}first{end-link}images/one.jpg{end-txttooltip} and this is {txttooltip}second{end-link}images/two.jpg{end-txttooltip} tooltip.

Where to Use

You can add tooltip shortcodes in:

• Joomla articles (Article Editor)
• Custom HTML modules
• Any content area that supports HTML

Image Path Guidelines

• Use relative paths from your Joomla root (e.g., images/gallery/photo.jpg)
• Do not include leading slash in image paths
• Supported formats: JPG, JPEG, PNG, GIF, WebP, SVG
• Images are automatically resized according to your plugin settings

Features

Core Features

• Image Preview Tooltips: Show image previews when users hover over text links, providing instant visual context without leaving the page.
• Automatic Image Resizing: Automatically resize images for optimal tooltip display with configurable dimensions and aspect ratio preservation.
• Smart Image Caching: Automatically cache resized images for faster repeated loads and improved performance.
• WebP Format Support: Optional WebP format conversion for smaller file sizes and faster loading times.
• Lazy Loading: Load tooltip images only when needed to reduce initial page load time.
• Shortcode Examples Tab: Built-in tab with 10+ ready-to-use shortcode examples and one-click copy functionality.

Advanced Features

• Enhanced Accessibility: Full ARIA support, keyboard navigation, and WCAG compliance for accessibility standards.
• Performance Optimized: Uses Joomla's WebAssetManager for optimal asset loading (Joomla 5+) with automatic fallback for Joomla 4.
• Smart Positioning: Automatic tooltip positioning with intelligent edge detection to keep images within viewport.
• Configurable Dimensions: Resize images by height, width, or both with customizable quality settings.
• Mobile Responsive: Fully responsive design that works perfectly on all devices including mobile phones and tablets.
• Reduced Motion Support: Respects user's reduced motion preferences for better accessibility.

Compatibility

• Joomla 4, 5 & 6 Compatible: Full support for all modern Joomla versions with automatic feature detection.
• Modern PHP: PHP 8.0+ syntax and features for better performance and reliability.
• Future-Proof: Regular updates and security patches for long-term compatibility.

FAQ

• How do I add an image tooltip to my content?

  • Use the syntax: {txttooltip}Link Text{end-link}images/path/to/image.jpg{end-txttooltip}. See the Shortcode Examples tab for ready-to-use examples.

• What image formats are supported?

  • The plugin supports JPG, JPEG, PNG, GIF, WebP, and SVG formats. Images are automatically resized according to your plugin settings.

• How do I resize images for tooltips?

  • Configure the Resize Image By setting under General Settings. Choose Height, Width, or Both, and set the desired dimensions in pixels.

• Can I use WebP format for better performance?

  • Yes! Enable Enable WebP Support in Image Settings. The plugin will convert images to WebP format for smaller file sizes and faster loading.

• How does image caching work?

  • When enabled, resized images are cached in the images/txttooltip_plugin/ directory. This improves performance by avoiding repeated image processing.

• Is the plugin accessible for screen readers?

  • Yes! The plugin includes full ARIA support, keyboard navigation, and is WCAG compliant. Enable Accessibility Features in Display Settings (enabled by default).

• Which Joomla versions are supported?

  • The plugin is fully compatible with Joomla 4.x, 5.x, and 6.x. It uses WebAssetManager for Joomla 5+ with automatic fallback for Joomla 4.

• Where can I find shortcode examples?

  • The plugin includes a built-in Shortcode Examples & Usage tab in the plugin configuration with 10+ examples. Simply click "Copy" to copy any example to your clipboard.

• Do tooltips work on mobile devices?

  • Yes! The plugin is fully responsive and works perfectly on all devices including mobile phones and tablets. Tooltips automatically adjust position to stay within the viewport.

• How do I change the tooltip position?

  • Adjust the Tooltip Position setting under Display Settings. Choose from Auto (follows mouse), Top, Bottom, Left, or Right.

Troubleshooting

Common Issues and Solutions

• Tooltips Not Displaying

  • Ensure the plugin is enabled in Extensions > Plugins
  • Verify the shortcode syntax is correct: {txttooltip}Text{end-link}images/path.jpg{end-txttooltip}
  • Check that the image path is correct and the image exists
  • Clear Joomla cache and browser cache
  • Check browser console for JavaScript errors

• Images Not Showing in Tooltips

  • Verify the image path is correct (relative to Joomla root, no leading slash)
  • Check that the image file exists and is readable
  • Ensure the image format is supported (JPG, PNG, GIF, WebP, SVG)
  • Check file permissions on the images directory
  • Verify the image is not corrupted

• Images Not Resizing Properly

  • Check the Resize Image By setting in General Settings
  • Verify the height and width values are set correctly
  • Ensure the cache directory is writable: images/txttooltip_plugin/
  • Clear the image cache by deleting files in the cache directory

• Tooltips Appearing Too Quickly or Slowly

  • Adjust the Tooltip Delay setting in Display Settings
  • Set delay to 0 for instant display, or increase for slower appearance

• WebP Conversion Not Working

  • Ensure your server supports WebP format (check PHP GD or ImageMagick)
  • Verify WebP support is enabled in PHP
  • Check server error logs for conversion errors

• Plugin Not Loading Assets

  • For Joomla 5+, the plugin uses WebAssetManager - ensure you're using a compatible Joomla version
  • For Joomla 4, the plugin automatically falls back to legacy methods
  • Check file permissions on the plugin's assets folder
  • Verify jQuery is loaded (included with Joomla by default)

• Shortcode Examples Tab Not Showing

  • Ensure the fields folder is properly installed in the plugin directory
  • Check that fields/shortcodes.php file exists
  • Clear Joomla cache and refresh the plugin configuration page

Getting Help

If you continue to experience issues:

• Check Joomla error logs for PHP errors
• Visit our support forum: https://support.joomlax.com
• Ensure you're using the latest version of the plugin
• Verify your Joomla version is compatible (4.x, 5.x, or 6.x)