Search
Other Tooltips questions
Forum

Converting J3 Tooltips tags to J4 tags

Florence Rouch's Avatar Florence Rouch
Hello,
I need to use DB Replacer PRO to update the tags for Tooltips since I upgraded from Joomla 3 to Joomla 4.

First of all, I tried to make a list of different cases of syntax in my Tooltips tags, hoping you will help me to write the good regular expressions in DB Replacer to update them. This list is not obviously not exhaustive (I have several hundred of tooltips), but I hope these few ones will help me to understand the logic of regular expressions.

Before we go, I notice sometimes my tags contain "" that would be interpreted as code and break the new syntax, like in this example:
{tip TextContentWithQuotationMarks "TextContentWithQuotationMarks" TextContentWithQuotationMarks }text{/tip}
Is there any way to fix this issue or do I have to search for them all and replace them by hand only? I'm not even sure by wich way I can find those "" in my tooltips tags...

Here we go!

Tooltips with text only :
{tip TextContent}text{/tip}
{tip TextContent}<strong>textWithFormat</strong>{/tip}
{tip TextContent}<strong class="text-size-xlarge">textWithFormatAndClass</strong>{/tip}
{tip TextContent}text <strong>text</strong>{/tip}
{tip TextContentWithFormat <strong>TextContentWithFormat</strong> TextContentWithFormat}<strong>textWithFormat</strong>{/tip}
{tip TextContentWithURL <a href="index.php?option=com_flexicontent&amp;view=item&amp;cid=92&amp;id=201&amp;Itemid=1283" title="TitleText"><strong>TextContentWithURLAndFormat</strong></a> TextContentWithURL <strong>TextContentWithURLAndFormat</strong> }<strong>text</strong>{/tip}
{tip TextContentWithURLAndHashtag <a href="index.php?option=com_flexicontent&amp;view=item&amp;cid=92&amp;id=118&amp;Itemid=1246#cop" title="TitleText">textWithaSlash / textWithaSlash </a>}<strong>text</strong>{/tip}
{tip TitleText::TextContent <strong>TextContent</strong> TextContent}text{/tip}

Tooltips with image(s) :
{tip <img src="images/subfolder/image1.jpg" alt="TitleOfImage" width="400" height="300" class="valign-middle" />TextContentWithImage}text{/tip}
{tip <img src="images/subfolder/image1.jpg" alt="TitleOfImage" width="300" height="200" /><br />TextContentWithImageAndBreakline}<strong>textWithFormat</strong>{/tip}
{tip <img style="margin: 10px;" src="images/subfolder/subsubfolder/image1.jpg" alt="TitleOfImage" />}text{/tip}
{tip TextContentWithImage <img src="images/subfolder/subsubfolder/image1.png" alt="TitleOfImage" width="300" height="71" />} text {/tip}
{tip TextContentWithImageAndDoubleDots : <img src="images/subfolder/subsubfolder/image1.png" alt="TitleOfImage" />}text{/tip}
{tip TextContentWithImageAndDoubleDotsAndbreakLine : <img src="images/subfolder/subsubfolder/image1.png" alt="TitleOfImage1" /><br />TextContentWithImageAndDoubleDotsAndbreakLine : <img src="images/subfolder/subsubfolder/image2.png" alt="TitleOfImage2" />}text{/tip}
{tip<img src="images/subfolder/image1.jpg" alt="TitleOfImage)" width="400" height="300" />TextContentWithImage}<strong>textWithFormat</strong>{/tip}

Maybe double dots (🙂 and breakline (<br /> are no problem, but in case they could be, I mentioned them above. If they are no problem, just tell me.

Last question : do you think it would be a good idea to try the replacement first in ReReplacer (on the fly), then when it's ok only in DB Replacer?

Thank you for your help.
Peter van Westen's Avatar Peter van Westen ADMIN
Have you tried the steps explained here?
docs4.regularlabs.com/tooltips/getting-s...m-joomla3-to-joomla4
Please post a rating at the Joomla! Extensions Directory
Florence Rouch's Avatar Florence Rouch
I was a little afraid about breaking everything but if you tell me to try, OK, I try. I will come back here to tell you what happened.

When I test it with a image inside the tooltip, there is no dashed underline on the text bearing the tooltip: it seems that a css command is preventing the underline to appear in this case. What can I do to get it back?
Peter van Westen's Avatar Peter van Westen ADMIN
For more info about how elements get their styling, you can use the Element Inspector of your browser.
Please post a rating at the Joomla! Extensions Directory
Florence Rouch's Avatar Florence Rouch
Regarding the dashed underline :

As far I understand it, the problem is in the CSS coming with Tooltips :
When the content of the tip is an image, the CSS prevents the dashed underline to appear.
Even if the tooltips is beared by some text, not by an image like in your example here: docs4.regularlabs.com/tooltips/tutorial/how-to-use-it-syntax
[data-tooltips-is-image-link], [data-tooltips][data-tooltips-is-image] {
    border-bottom: none;

[data-tooltips] {
    cursor: pointer;
    border-bottom: 1px dashed #c0c6cf;

The solution would be to exclude the dashed underline ONLY if the tooltip opens over an image (that is relevant: why someone would want to underline an image?)
But if the tooltip appears when we hover a word or a phrase, then we need the dashed underline to be there.

Could you please tell me which css file I am supposed to modify, and where to find it? (I will rather put the change inside my custom.css but I need to see the original tooltips css in order to do that)

Regarding the bulk replacing syntax :

The method described on the URL you mentioned worked like a charm, this is perfect.
For text.
Could you help me with the tootlips containing an image please?

Thanks.
Florence Rouch's Avatar Florence Rouch
Thank you for the css answer. What about the bulk replacing syntax for image tooltips ?
I need to replace the old syntax {tip <img src="images/folder/image1.png" alt="description" width="400" height="383" />text{/tip} by the new syntax {tip content="<img src="images/folder/image1.png" alt="description" width="400" height="383" />"}text{/tip}.
The problem with the procedure described in docs4.regularlabs.com/tooltips/getting-s...ulk-replacing-syntax is that it does not work with this old syntax starting with a "<" before img.

If we focus only on the changing part of the syntax, I need to replace :
{tip <img src="images/folder/image1.png"

With :
{tip content="<img src="images/folder/image1.png"
Peter van Westen's Avatar Peter van Westen ADMIN
Try:
\{tip ([^\}]+)\}
Replace with:
{tip content="\1"}
Please post a rating at the Joomla! Extensions Directory
Florence Rouch's Avatar Florence Rouch
thanks
You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription