Easy Tooltip 1.7 is a modern Joomla content plugin for inline text tips. Add a shortcode around any phrase and readers get contextual help on hover, focus, or click — without cluttering the article.

Version 1.7 is a full rebuild: vanilla JavaScript (no jQuery), four tip themes, solid SVG pointers, sticky click pinning, and an optional editor insert button.

Key highlights:

• Joomla 4, 5 & 6 compatible
• Themes: Dark, Light, Glass, Brand
• Placement: top, bottom, left, right, follow
• Solid filled tip pointers on every theme
• Per-shortcode overrides for theme, position, animation, colour, and link
• Accessible triggers with ARIA support

Download

After purchase, download the package from your store account or the download email. Prefer the full package: pkg_easy_tooltip_1.7.zip.

Install

1. Log in to the Joomla administrator
2. Go to System > Install > Extensions
3. Upload pkg_easy_tooltip_1.7.zip
4. Enable Content - Easy Tooltip and Editor - Easy Tooltip
5. Clear Joomla and browser caches

You can also install the content plugin and editor button separately if needed.

Configure

Open System > Plugins, search for Content - Easy Tooltip, and set your site-wide defaults (theme, placement, activation, colours).

Open System > Plugins > Content - Easy Tooltip.

• Activation — Hover (default), Focus, or Click
• Keep Alive — keep the tip open while the pointer is over the tip panel
• Theme — default tip look: Dark, Light, Glass, or Brand
• Default Position — Follow, Top, Bottom, Left, or Right
• Animation — None, Fade, Scale, or Slide
• Show Delay — milliseconds before the tip opens (default 120)
• Maximum Width — tip max width in pixels (default 240)
• Edge Offset — gap between trigger and tip (default 10)
• Link Target — open linked tips in a new tab or the same tab

Tip: Click pins a tip; Escape or an outside click dismisses it. Linked tips pin first; Ctrl/Cmd-click or a second click follows the URL.

Design

• Background Colour — used by Dark (and as a base for Brand styling)
• Text Colour — tip body text colour
• Accent Colour — Brand theme background and trigger highlight colour
• Corner Radius — tip panel radius in pixels (default 10)
• Extra CSS — optional custom CSS for advanced tweaks

Themes

• Dark — solid dark panel with a matching filled pointer
• Light — white panel with a solid white pointer for pale pages
• Glass — frosted light panel with a solid white pointer
• Brand — accent-coloured panel with a matching filled pointer

Pointers are solid SVG shapes so they stay filled and readable on every theme.

Basic

{etooltip content="Soft full-grain leather with brass hardware."}leather tote{/etooltip}

With theme and position

{etooltip content="Closed-back monitoring headphones." theme="light" position="top"}studio headphones{/etooltip}

Glass tip below the trigger

{etooltip content="Compact camera kit for travel." theme="glass" position="bottom"}mirrorless kit{/etooltip}

Brand tip with accent colour

{etooltip content="Polarised lenses and metal frame." theme="brand" color="#2563eb"}aviator sunglasses{/etooltip}

Linked tip

{etooltip content="Visit the product page." link="https://example.com/product"}product name{/etooltip}

Cursor follow

{etooltip content="Tracks the pointer." position="follow"}cursor follow tip{/etooltip}

Attributes

• content — tip text (required)
• theme — dark | light | glass | brand
• position — top | bottom | left | right | follow
• animation — fade | scale | slide | none
• link — optional URL
• color — trigger / accent colour
• class — extra CSS class on the trigger

Use the Editor - Easy Tooltip button to insert a starter shortcode from the article editor.

Core

• Inline text tips via {etooltip} shortcode
• Hover, focus, or click activation
• Dark, Light, Glass, and Brand themes
• Top, bottom, left, right, and follow placement
• Solid SVG tip pointers on all themes
• Sticky click pinning with Escape dismiss
• Optional linked triggers
• Fade, scale, slide, or none animations

Authoring & platform

• Per-shortcode overrides for theme, position, animation, colour, class, and link
• Editor insert button (editors-xtd)
• Legacy shortcode compatibility
• Joomla 4 / 5 / 6 with WebAssetManager
• Vanilla JS — no jQuery
• ARIA-friendly triggers and reduced-motion support

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6. PHP 8.0+ is recommended.

• Do I need jQuery?

  • No. Version 1.7 is vanilla JavaScript.

• How do I change the tip theme?

  • Set the default under plugin Design / Basic settings, or use theme="light" (or dark, glass, brand) on the shortcode.

• Can tips follow the cursor?

  • Yes — use position="follow".

• How does click pinning work?

  • Click once to pin. Press Escape or click outside to close. Linked tips pin first; Ctrl/Cmd-click or a second click opens the URL.

• Why use an SVG pointer?

  • Solid SVG fills stay sharp on white and dark pages and avoid hollow outline artifacts from CSS border triangles.

• Where can I get help?

  • Visit joomlax.com or the support area linked from your store account.

Tips not showing

• Confirm Content - Easy Tooltip is enabled
• Check shortcode spelling: {etooltip content="..."}Text{/etooltip}
• Clear Joomla cache and hard-refresh the browser
• Confirm the article context runs content plugins

Old styles still visible

• Hard-refresh so easy-tooltip.css / .js load the latest version query string
• Disable template or extension CSS that targets old TipTip IDs (#tiptip_holder)

Pointer looks wrong

• Version 1.7 uses solid SVG pointers — update to the latest 1.7 package if you still see hollow or squared arrows
• Light/glass tips intentionally use a white filled pointer; dark/brand match the tip fill

Linked tip does not navigate

• First click pins the tip by design; use Ctrl/Cmd-click or click again to follow the link

Still stuck?

• Check the browser console for JavaScript errors
• Review Joomla error logs
• Contact support via joomlax.com