Image Tooltip

Version: 2.3

Installation

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.

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.

Plugin Parameters

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.
  4. Find the "Show By" parameter and select the option that you want to use to show the large image.
  5. Find the "Crop Image" parameter and select whether you want to crop the  images to fit the tooltip window or not.
  6. Find the "Image Height" parameter and specify the height that you want the images to be displayed in the tooltip window.
  7. Find the "Image Width" parameter and specify the width that you want the images to be displayed in the tooltip window.
  8. Find the "Link Target" parameter and select the option that determines how the link should be opened (e.g. in a new window or the same window).
  9. Find the "Tooltip Background Color" parameter and select the color that you want to use for the background of the tooltip window.

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.

Plugin Syntax

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. "content" is an attribute of the tag and is used to specify the text that will be displayed as the tooltip content.

  3. "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.

  4. "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.

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

  6. "text" is an attribute of the tag and is used to specify the text that will be displayed as the tooltip.
  7. "link" is an attribute of the tag and is used to specify the URL that the thumbnail image will be linked to.

  8. "{/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.

Examples

Example 1 - Tooltip with image to the right of the paragraph.
---------------------------------------
{itooltip thumbsrc="/images/cloud/9.jpg" lgsrc="/images/cloud/9.jpg" float="right" link="https://www.infyways.com" content="Lady in Black"}


Example 2 - Tooltip with image to the left of the paragraph
-------------------------------------------------------------------
{itooltip content="Lady in Red" thumbsrc="/images/cloud/8.jpg" lgsrc="/images/cloud/8.jpg" float="left" link="https://demo.infyways.com"}

Example 3 - Tooltip with Text to Image
-----------------------------------------------
{itooltip type="text"  text="Tooltip Text" lgsrc="/images/cloud/9.jpg"  link="https://www.infyways.com"}