Easy Tooltip

Introduction

Easy ToolTip is a powerful Joomla content plugin that allows you to add beautiful, customizable tooltips to your Joomla content with simple shortcodes. With modern flat design (2025 style), complete color customization, and flexible activation options, this plugin makes it easy to provide contextual information to your users without cluttering your content.

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• Modern Flat Design with No Borders or Shadows
• Complete Color Customization
• Built-in Shortcode Examples Tab
• Enhanced Accessibility (WCAG Compliant)
• Performance Optimized with WebAssetManager

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_content_easy_tooltip_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_easy_tooltip_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 - Easy 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 - Easy ToolTip in the list.

General Settings

• Tooltip Activation Method: Choose how users will trigger the tooltip (default is Hover).
  • Hover: Shows when mouse hovers over the element (recommended)
  • Focus: Shows when element receives keyboard focus (accessibility-friendly)
  • Click: Shows when element is clicked
• Keep Tooltip Visible: When enabled, the tooltip remains visible even after mouse moves away (default is No).
  • Recommended: No for hover, Yes for click
• Default Tooltip Position: Set the preferred position where tooltips appear (default is Bottom).
  • Options: Top, Bottom, Left, Right
  • The tooltip automatically adjusts if there's not enough space

Appearance and Animation

Appearance & Animation Settings

• Maximum Tooltip Width: Set the maximum width in pixels (default is 200). Recommended: 200-300px for short tooltips, 400-500px for longer content.
• Distance from Element: Control spacing between tooltip and element in pixels (default is 3). Recommended: 3-10px.
• Show Delay: Time in milliseconds to wait before displaying tooltip (default is 400). Recommended: 300-500ms. Set to 0 for instant display.
• Fade In Duration: Duration of fade-in animation in milliseconds (default is 200). Recommended: 150-300ms.
• Fade Out Duration: Duration of fade-out animation in milliseconds (default is 200). Recommended: 150-300ms.

Color Settings

Color Settings

Customize all tooltip colors using the intuitive color pickers in the plugin settings. All colors can be adjusted to match your website's branding and design.

• Tooltip Background Color: Select the background color for tooltip popup (default: White #ffffff). The arrow color automatically matches this color for seamless design.
• Tooltip Text Color: Select the text color for tooltip content (default: Dark gray #1f2937). Ensure good contrast with background for optimal readability.
• Trigger Underline Color: Select the color of dashed underline on trigger elements (default: Medium gray #6b7280). This appears on text that has tooltips attached.
• Trigger Hover Color: Select the color when hovering over trigger elements (default: Blue #3b82f6). This provides visual feedback when users interact with tooltip triggers.

Note: The tooltip arrow color automatically matches the background color you select, ensuring a cohesive and professional appearance.

Advanced Settings

Advanced Settings

• Custom CSS Styles: Add your custom CSS code to further customize tooltip appearance. You can target tooltip elements using these selectors:
  • .ea-tooltip - The trigger element (text with tooltip)
  • #tiptip_holder - The tooltip container
  • #tiptip_content - The tooltip content area

  Example: .ea-tooltip { border-bottom: 2px dashed #0066cc; }

• Enable Accessibility Features: When enabled, adds ARIA attributes and keyboard navigation support (default: Yes). This improves compatibility with screen readers and ensures compliance with accessibility standards (WCAG). Recommended for public websites.
• Debug Mode: Enable to output debug information to browser console (default: No). Useful for troubleshooting tooltip initialization, configuration, and JavaScript errors. Only enable during development or when experiencing issues.

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 tooltips into your content. Write the code in your article where you want to show the tooltip.

Simple Tooltip

{etooltip content="Content for the tooltip"}Tooltip Text{/etooltip}

Tooltip with Link

{etooltip content="Content for the tooltip" link="https://www.example.com"}Tooltip Text{/etooltip}

Tooltip with Custom Class

{etooltip content="Content for the tooltip" class="yourClass"}Tooltip Text{/etooltip}

Tooltip with Custom Text Color

{etooltip content="Content for the tooltip" color="#ff0000"}Tooltip Text{/etooltip}

Tooltip with All Options

{etooltip content="Content for the tooltip" link="https://www.example.com" class="yourClass" color="#0066cc"}Tooltip Text{/etooltip}

Where to Use

You can add tooltip shortcodes in:

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

Features

Core Features

• Customizable Tooltips: Add content, links, classes, and custom colors to your tooltips for a personalized experience.
• Flexible Activation: Choose between hover, focus, or click to activate tooltips. Perfect for different user interaction preferences.
• Modern Flat Design (2025 Style): Clean, minimal design with no gradients, borders, or shadows for a modern, professional appearance.
• Complete Color Customization: Full control over tooltip background, text, trigger underline, and hover colors with intuitive color pickers.
• Smart Positioning: Automatic position detection with intelligent edge detection to keep tooltips within viewport.
• 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.
• Additional CSS Support: Add custom CSS for advanced styling beyond default options.
• Dark Mode Support: Automatic dark mode support via CSS media queries.
• High Contrast Mode: Support for high contrast mode for better accessibility.
• Reduced Motion Support: Respects user's reduced motion preferences.

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 change the activation method for tooltips?

  • Adjust the Tooltip Activation Method setting under General Settings. Choose from Hover (recommended), Focus (accessibility-friendly), or Click.

• Can I keep the tooltip visible after activation?

  • Yes, set the Keep Tooltip Visible option to Yes under General Settings. Recommended: No for hover, Yes for click activation.

• 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. See the Shortcode Examples tab for ready-to-use examples.

• Can I customize the tooltip colors?

  • Yes! The plugin includes a dedicated Color Settings tab where you can customize tooltip background, text, trigger underline, and hover colors using intuitive color pickers.

• How do I add custom CSS styling?

  • Enter your custom CSS in the Custom CSS Styles field under Advanced Settings. You can target .ea-tooltip (trigger), #tiptip_holder (container), or #tiptip_content (content).

• Is the plugin accessible for screen readers?

  • Yes! The plugin includes full ARIA support, keyboard navigation, and is WCAG compliant. Enable Accessibility Features in Advanced 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.

Troubleshooting

Common Issues and Solutions

• Tooltips Not Displaying

  • Ensure the plugin is enabled in Extensions > Plugins
  • Verify the shortcode syntax is correct: {etooltip content="..."}Text{/etooltip}
  • Check that the content contains the etooltip tag
  • Clear Joomla cache and browser cache
  • Check browser console for JavaScript errors (enable Debug Mode if needed)

• Incorrect Tooltip Position

  • Verify the Default Tooltip Position setting in General Settings
  • Check the Distance from Element setting - try increasing the value
  • Tooltips automatically adjust position if there's not enough space - this is normal behavior

• Styling Issues or Colors Not Applying

  • Check the Color Settings tab and ensure colors are properly selected
  • Verify the Custom CSS Styles field doesn't conflict with default styles
  • Clear browser cache to see updated styles
  • Check if your template's CSS is overriding tooltip styles

• Tooltips Appearing Too Quickly or Slowly

  • Adjust the Show Delay setting in Appearance & Animation Settings
  • Modify Fade In Duration and Fade Out Duration for animation speed
  • Set delay to 0 for instant display

• Accessibility Features Not Working

  • Ensure Enable Accessibility Features is set to Yes in Advanced Settings
  • Test keyboard navigation using Tab key and Enter/Space to activate
  • Check browser console for any JavaScript 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:

• Enable Debug Mode in Advanced Settings to see detailed console logs
• 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