How to Upgrade Tooltips from Joomla 3 to Joomla 4

Tooltips has a single package that works on both Joomla 3 and Joomla 4. The correct files will be installed from the same package depending on which version of Joomla you're using.

We have separate Documentation pages for the J3 and J4 versions of Tooltips. You can switch to the desired J3/J4 documentation by using the version selection at the top of this site.

This is the process to upgrade any of the Regular Labs Extensions:

  1. First, make sure that your Joomla 3 site is updated to the latest Joomla 3.10 release
  2. On Joomla 3.10, update all the installed Regular Labs Extensions to their latest version
  3. Upgrade your Joomla 3.10 site to Joomla 4
  4. Upgrade the PHP version on your server to PHP 8.1 or higher
  5. Reinstall the latest versions of all the Regular Labs extensions. This will upgrade the extensions to their Joomla 4 counterpart.

Differences with the Joomla 3 version

Tooltips for Joomla 4 has been completely rewritten. This means there are quite some differences to the Joomla 3 version.

Themes & Styles

Tooltips for Joomla 4 now comes with themes and styles.

If you want to give a tooltip a color, this no longer is done via a class attribute, but with a style attribute.

Read more about it here: Themes for Tooltips

Different CSS

The HTML output and DOM elements generated by Tooltips are different on Joomla 4 than they were on Joomla 3.

This means that all CSS has been changed too. Your custom CSS for Tooltips on Joomla 3 will not work on Joomla 4.
If you want to customize the look and feel on Joomla 4 too, you will need to rewrite your CSS.

No more jQuery

The javascript for Tooltips has been rewritten from the ground up, using vanilla (pure) javascript. It is no longer reliant on jQuery or other javascript libraries.

This should also mean that there should be less to no more conflicts with other extensions (like template frameworks that load a bunch of their own javascripts and libraries).

No editor button

The current version of Tooltips for Joomla 4 no longer comes with an editor button. An editor button might be added to a later version, but to me it doesn't really seem very necessary at this moment.

Removal of support for old syntax

The old syntax has been deprecated for quite a while in the Joomla 3 version, for the attribute syntax.
So instead of:

{tip Text in Tooltip}...{/tip}

You need to do:

{tip content="Text in Tooltip"}...{/tip}

The Joomla 3 version still supported the old syntax. But the Joomla 4 version doesn't.
So you need to use the attribute syntax.

Other settings

Some of the global settings have been changed. Mainly some settings for specific styling have been removed. Styling can and needs to be done via CSS.

Browse through the Configuration to see if there is anything you use that has been changed.

Bulk replacing syntax

If you need to change certain things in your {tip} tags to get things to work how you want, you can use DB Replacer to replace things in a few clicks.

For instance, if you want to replace the old {tip Title:Text in Tooltip} syntax to {tip titel="Title" content="Text in Tooltip"}, you can do this in DB Replacer Pro:

Search (Regular Expressions):

\{tip ([^\}"]+)\:([^\}"]+)\}

Replace:

{tip title="\1" content="\2"}

And if you want to replace the old {tip Text in Tooltip} syntax to {tip content="Text in Tooltip"}, do this:

Search (Regular Expressions):

\{tip ([^\}"]+)\}

Replace:

{tip content="\1"}