Introduction
Easy ToolTip is a Joomla plugin allows you to add customizable tooltips to your Joomla content with various options for activation, position, and styling. This documentation covers the installation, configuration, and usage of the Easy ToolTip plugin.
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: EasyToolTip_UNZIP.zip
Unzipping the Package
Use any file unzipper tool or WinRAR to unzip the EasyToolTip_UNZIP.zip package. After unzipping, you will find the following contents:
- plg_easy_tooltip_X.x.zip: This is the installation file compatible with Joomla 3.x and Joomla 4.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 3 & 4: Navigate to Extensions > Install, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file (
plg_easy_tooltip_X.x.zip
), then click "Upload and Install."
A success message will be displayed once the installation is complete.
Configuration
After installation, the plugin needs to be configured to suit your requirements. Access the plugin settings by navigating to Extensions > Plugins, and find Content - Easy ToolTip in the list.
General Settings
- Activate On: Select the action by which the tooltip will be enabled (default is
hover
).- Options:
Hover
,Focus
,Click
- Options:
- Keep Alive: Select whether you want to always show the tooltip once it is activated (default is
No
).- Options:
Yes
,No
- Options:
- Tooltip MaxWidth: Enter the maximum width of the tooltip in pixels (default is
200
). - Tooltip Edge Offset: Enter the distance in pixels to offset the tooltip from the element (default is
3
). - ToolTip Position: Select the orientation the tooltip should show (default is
bottom
).- Options:
Top
,Bottom
,Left
,Right
- Options:
- Delay Time: Enter the number of milliseconds to delay before showing the tooltip after activation (default is
400
). - Tooltip FadeIn Time: Enter the tooltip fade-in time in milliseconds (default is
200
). - Tooltip FadeOut Time: Enter the tooltip fade-out time in milliseconds (default is
200
). - Additional CSS: Add extra CSS for further customization if needed.
Once configured, you can use the Easy ToolTip plugin to add tooltips to your Joomla content.
Syntax - How to Use
Here is the syntax to integrate tooltips into your content. Write the code in your article where you want to show the plugin.
Simple Tooltip
{etooltip content="Content for the tooltip"}Tooltip Text{/etooltip}
Tooltip with Link
{etooltip content="Content for the tooltip" link="https://www.infyways.com"}Tooltip Text{/etooltip}
Tooltip with Class
{etooltip content="Content for the tooltip" link="https://www.infyways.com" class="yourClass"}Tooltip Text{/etooltip}
Tooltip with Text Color
{etooltip content="Content for the tooltip" link="https://www.infyways.com" class="yourClass" color="#444444"}Tooltip Text{/etooltip}
Features
- Customizable Tooltips: Add content, links, and classes to your tooltips.
- Flexible Activation: Choose between hover, focus, or click to activate the tooltip.
- Position and Style: Customize the tooltip's position, maximum width, edge offset, and fade times.
- Additional CSS: Add extra CSS for further styling options.
FAQ
-
How do I change the activation method for tooltips?
- Adjust the Activate On setting under General Settings.
-
Can I keep the tooltip visible after activation?
- Yes, set the Keep Alive option to
Yes
under General Settings.
- Yes, set the Keep Alive option to
-
What is the syntax for adding tooltips to my content?
- Use the
{etooltip content="..."}Tooltip Text{/etooltip}
syntax in your Joomla articles or custom HTML modules.
- Use the
-
Can I customize the tooltip's appearance with additional CSS?
- Yes, enter your custom CSS in the Additional CSS field under General Settings.
Troubleshooting
- Tooltips Not Displaying: Ensure the plugin is enabled and the syntax is correctly added to your content.
- Incorrect Position: Verify the ToolTip Position setting and ensure it is correctly set.
- Styling Issues: Check the Additional CSS and other settings for conflicts.