Get Started

After purchasing the extension you should have received an email with the link to download the latest version of Image Tooltip plugin. Download it from the link and UNZIP it. You will find two files after unzipping the file.

1. plg_tooltip_X.x
2. ReadMe.txt

To install Image Tooltip in Joomla, you can follow these steps:

1. Login to the Joomla Administrator Panel.
2. Go to Extensions > Manage > Install.
3. Click on the "Upload Package File" tab.
4. Click on the "Choose File" button and select the Image Tooltip extension package plg_tooltip_X.x that you have downloaded.
5. Click on the "Upload & Install" button.
6. If the installation is successful, you should see a success message.
7. Go to Extensions > Plugins, and search for the Image Tooltip plugin.
8. Enable the plugin.

Requirements:

• Joomla 4.0, 5.0, or 6.0
• PHP 7.4 or higher (PHP 8.0+ recommended)
• GD Library or ImageMagick for image processing

After following these steps, the Image Tooltip extension should be installed and ready to use. You can now add tooltips to images in your Joomla articles.

To configure the parameters of the Image Tooltip plugin in Joomla, follow these steps:

1. Login to the Joomla Administrator Panel.
2. Go to Extensions > Plugins.
3. Search for the Image Tooltip plugin and click on it to open its settings page.

General Settings:

• Resize Large Image By: Controls how the LARGE image (lgsrc) shown inside the tooltip popup is resized. Options: Height, Width, or Both.
• Large Image Height (px): Height in pixels for the LARGE image shown inside the tooltip popup (when lgsrc is specified in shortcode).
• Large Image Width (px): Width in pixels for the LARGE image shown inside the tooltip popup (when lgsrc is specified in shortcode).
• Link Target: Select how links open when the link parameter is used in the shortcode. Options: New Tab or Same Window.

Image Settings:

• Enable WebP Support: Convert images to WebP format for better performance (requires WebP support).
• Image Quality: Image quality for resized images (1-100). Higher values mean better quality but larger file size.
• Enable Lazy Loading: Load tooltip images only when needed for better performance.

Display Settings:

• Tooltip Background Color: Select the background color of the tooltip popup.
• Tooltip Text Color: Select the text color for content displayed inside the tooltip popup.
• Tooltip Position: Default position for tooltip display. Options: Auto (Follow mouse), Top, Bottom, Left, or Right.
• Tooltip Delay (ms): Delay before showing tooltip in milliseconds.
• Enable Accessibility Features: Add ARIA attributes and keyboard navigation support.

Styling Settings:

• Tooltip Font Size: Font size for the tooltip popup (e.g., 13px, 14px, 1em).
• Tooltip Padding: Padding inside the tooltip popup (e.g., 4px, 8px, 10px).
• Tooltip Border Radius: Border radius for rounded corners (e.g., 4px, 8px, 0px for square corners).
• Tooltip Border Width: Border width around the tooltip (e.g., 0px for no border, 1px, 2px).
• Tooltip Border Color: Border color around the tooltip popup. Only applies when border width is greater than 0.
• Tooltip Max Width: Maximum width of the tooltip popup (e.g., 400px, 500px, 80%).
• Content Text Font Size: Font size for the content text inside tooltip (e.g., 12px, 14px, 1em).
• Content Text Padding: Padding for the content text area (e.g., 2px, 4px, 8px).
• Enable Shadow: Enable box shadow for the tooltip popup.
• Shadow Horizontal Offset: Horizontal offset of the shadow (e.g., 5px, 10px, -5px for left shadow).
• Shadow Vertical Offset: Vertical offset of the shadow (e.g., 5px, 10px, -5px for upward shadow).
• Shadow Blur Radius: Blur radius of the shadow (e.g., 8px, 15px, 0px for sharp shadow).
• Shadow Spread: Spread radius of the shadow (e.g., 0px, 2px, -2px).
• Shadow Color: Color of the shadow (supports rgba for transparency).

Advanced Settings:

• Use Minified Assets: Use minified CSS and JavaScript files for better performance.
• Cache Resized Images: Cache resized images for better performance.

Once you have finished configuring the plugin parameters, be sure to save your changes by clicking on the "Save" button. The Image Tooltip plugin should now be configured to work according to your preferences.

The syntax is the format used to insert an image tooltip into a Joomla article using the Image Tooltip plugin. The syntax is a custom tag, with the following elements:

1. "itooltip" is the tag name and is used to indicate that you want to insert an image tooltip.

2. "thumbsrc" is an attribute of the tag and is used to specify the source of the thumbnail image that will be displayed in the article.

3. "lgsrc" is an attribute of the tag and is used to specify the source of the larger image that will be displayed in the tooltip.

4. "thumbwidth" is an attribute used to specify the width of the thumbnail image in pixels.

5. "thumbheight" is an attribute used to specify the height of the thumbnail image in pixels.

6. "float" is an attribute of the tag and is used to specify the position of the thumbnail image in the article (e.g. "right", "left", or "none").

7. "text" is an attribute of the tag and is used to specify the text that will be displayed as the tooltip trigger or alt text.

8. "content" is an attribute of the tag and is used to specify the text that will be displayed as the tooltip content.

9. "link" is an attribute of the tag and is used to specify the URL that the thumbnail image or text will be linked to.

10. "type" is an attribute used to specify the tooltip type. Use "text" for text-only tooltips without images.

11. "{/itooltip}" is the closing tag and is used to indicate the end of the image tooltip.

The Image Tooltip plugin uses this syntax to generate the image tooltip in the article. By using the attributes, you can customize the appearance and behavior of the tooltip to suit your needs.