Search
Other Tooltips questions
Forum

Tooltips for Joomla 4: Ready for testing

Peter van Westen's Avatar Peter van Westen ADMIN
The first alpha version of Tooltips for Joomla 4 is available:
regularlabs.com/development-releases

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.
The default Theme is 'Light'.

If you want to give a tooltip a color, this no longer is done via a class attribute, but with a style attribute.
For instance, you can do:
{tip title="..." content="..." theme="dark" style="red"}...{tip}
{tip title="..." content="..." theme="light" style="success"}...{tip}

Fade and Zoom effects
The Pro version allows you to choose the effect used to show/hide the tooltip.

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.

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 system plugin settings to see if there is anything you use that has been changed.

Removal of support for old syntax
The old syntax has been deprecated 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.

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.
regularlabs.com/dbreplacer
Please post a rating at the Joomla! Extensions Directory
wim ooms's Avatar wim ooms
Hi Peter, I have installed this first alpha version of Tooltips. Have been waiting for this to appear on the development repository for quite a while, because I want to switch my site to joomla 4. So, thank you!
So I am trialing a website copy on Joomla4, and I experience some difficulties. Up until now I use the following syntax for placing a simple tooltip (which still works on the J3 version by the way): {tip tooltiptext}text-where-tooltip-appears{/tip}. But this doesn't work anymore. I discovered that I should change my syntax into {tip content="tooltiptext"}text-where-tooltip-appears{/tip}.
Is this indeed correct? Is it mandatory to re-write the syntax as such for a simple tooltip without title?
When it is, this is going to be cumbersome for me I am afraid to change all simple tooltips by hand.
Therefore when it is, would it be possible to go back to the previous syntax for a simple tooltip (without title) as used in previous J3 version? Meaning this syntax: {tip tooltiptext}text-where-tooltip-appears{/tip}
Many thanks, Wim
Peter van Westen's Avatar Peter van Westen ADMIN
Correct, you need to use the attribute syntax. I added some text about that in the previous post.

You can use DB Replacer to replace all the old syntax to the 'new' syntax.

The old syntax has not been mentioned in the documentation for Joomla 3 since August 2016!
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
The replacement you can do in DB Replacer Pro:

Search (Regular Expressions):
\{tip ([^\}"]*)\}
Replace:
{tip content="\1"}
Please post a rating at the Joomla! Extensions Directory
wim ooms's Avatar wim ooms
Oh, seriously (regarding the old syntax) never realised any changes were made to that.
But will update then.
Using your guidance provided.
Thanks
wim ooms's Avatar wim ooms
works like a charm
thanks again
Peter van Westen's Avatar Peter van Westen ADMIN
My pleasure 🙂
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
The stable version has been released.
Also the new documentation is live:
docs4.regularlabs.com/tooltips
Please post a rating at the Joomla! Extensions Directory
George Benson's Avatar George Benson
Just FYI - docs4.regularlabs.com/tooltips/getting-started/introduction says, "It also comes with an editor button plugin." This is confusing if no button is included with the J4 version. I was not upgrading from J3 to J4 so I did not initially see that J4 has no button. I for one do think that a button can be useful if it could bring up the ability to custom style the tooltip....so having a button has my vote...but until then I would suggest changing the document referenced above to reflect no button at this time.
Peter van Westen's Avatar Peter van Westen ADMIN
Sorry, that was a leftover from the Joomla 3 docs. I removed that line.
Please post a rating at the Joomla! Extensions Directory
Nico Somerwil's Avatar Nico Somerwil
Good to see that Tooltips is now also available for J4, but for sure I (also) miss the editor button.
Peter van Westen's Avatar Peter van Westen ADMIN
Please try the latest development version from:
regularlabs.com/development-releases

Editor button added...
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
Any chance you can test out the editor button?
regularlabs.com/development-releases
Please post a rating at the Joomla! Extensions Directory
George Benson's Avatar George Benson
Sure thing. I will install it today and let you know about any issues I find, if any.
George Benson's Avatar George Benson
So I am running Joomla 4 with the following specs:

Database Type mysql
Database Version 10.2.44-MariaDB
Database Collation latin1_swedish_ci
Database Connection Collation utf8mb4_general_ci
Database Connection Encryption None
Database Server Supports Connection Encryption No
PHP Version 8.0.28
Web Server Apache
WebServer to PHP Interface fpm-fcgi
Joomla! Version Joomla! 4.2.8 Stable [ Uaminifu ] 16-February-2023 15:00 GMT
User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

For your information - the site I installed it on is a test site that is a fresh Joomla install that has been kept up to date with Joomla updates. It has NOTHING extra installed except for the PRO versions of the Regular Labs extensions. (I have a Lifetime license and have most of the extensions installed.)

I installed the version using the drag and drop method. It installed without any issues. I enabled the editor button and created a test entry. The entry worked with no issues. I like the interface that the button creates. It is simple and easy to understand. Is there a way to somehow "EDIT" a tooltip that was created using the button? I can see people who are not programmers wanting to be able to create an entry and try one thing and then go back and edit it to try something new and from what I can tell this currently doesn't appear to be an option. I might be missing something so if it is an option please let me know and I will test that as well. I am going to be building a new site in a couple of weeks that will be using tooltips a lot so I will let you know then if I run into any issues. Please let me know about the EDIT option and if that is not a feature maybe consider adding it.
Peter van Westen's Avatar Peter van Westen ADMIN
Thank you for testing it out.

No, there is no edit functionality.
The editor button helps create the correct syntax. You are free to edit it after it has been inserted into the article.
Or just delete the tooltip and create a new one.
Please post a rating at the Joomla! Extensions Directory
George Benson's Avatar George Benson
Your Welcome! Thanks for taking the time to add the feature. It does make things easier for the non programmers. Like I said above - I will let you know if I run into any issues.
You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription