• Payment Plugins Poll

    We need your feedback on the need for updated payment plugins. Please go here and give us your feedback.

  • Joomla 5.1

    For running J!5.1 you must install Fabrik 4.1
    See also Announcements

  • Subscription and download (Fabrik 4.1 for J!4.2+ and J!5.1) are working now

    See Announcement
    Please post subscription questions and issues here

    We have resolved the issue with the J! updater and this will be fixed in the next release.

  • Update & Changlog URL Fixer

    At the present time the update site URL for Fabrik is incorrect in all installations up to and including 4.1. This will be corrected in 4.2, however, if you wish to update Fabrik via the J! Updater you can download and install this plugin.

    This file is installed just like any other extension through the J! Extension Installation panel. It will not however actually install anything. Its sole purpose is to fix the Update Site and Changlog URL's. Once done it will simply exit.

    As always, we recommend you perform a site backup priot to installation.

Disappearing labels with tooltips

Trembowiecki

Active Member
Hi,

my system: PHP 8.2, Joomla 5.0.2, Fabrik 4.0. I've noticed that sometimes (not always!) when element has a tooltip, while loading form its label gets 'style=display: none;' and the element has no label in the form, which is frustrating. It happens also with element having validations (because they automatically get tooltips). Sometimes refreshing the form makes the 'invisibility' go away, sometimes it doesn't work. Can you replicate it?
 
Maybe this is related to this thread ?
 
Hi, unfortunately the tooltip solution is not applicable here. Here's what I've found so far: the problem must be JS script(s), which modifies label of the element with tooltip (adds 'aria' part) and adds the 'tooltip' part at the end of the page. Spotted cases:
- the script on page load, loads said bottom part (<div class="tooltip"...) and it doesn't go away, so the tooltip is always visible and when I hover the element's label, the tooltip doubles (one tooltip over the same another one),
- the script on page load modifies element's label and adds visibility mentioned earlier, so... no label at all.

Oh, and the debugging is off and browser console shows no errors. I don't know if it matters, but I use Chrome.
 
I can't replicate. I don't get an aria part nor a "tooltip" at the bottom.
Which elements are you using?
Any 3rd party plugin which may be triggered by Fabrik's 'data-bs-toggle="tooltip"'?
Is it a new or a F3-updated site? Any custom templates, overrides?

Do you have a link?
 
Now I look like a lunatic, don't I. But I enclose screenshots to show you what I mean:
- sscursoroff1.jpg: element's label with tooltip when cursor is off the label
- sscursorhover1.jpg: the cursor over the label
- sscursoroff2,jpg: html page structure when cursor is off label
- sscursorhover2.jpg: the cursor over the label
See? JS must modify the DOM when the cursor is over the label with tooltip and the script sometimes doesn't work as it should, hence the situations descibed in my last post above.

As for additional extensions - I have to investigate DJ-MegaMenu module, which I use on the site, but it's the only other extension I use.
Element: field, site created from scratch on Joomla 5, no template overrides.

As for the link: it's on local server (as part of our intranet), but when I hit the rock bottom, I can make it visible for you to take a look at, if you would like to investigate.
 

Attachments

  • sscursoroff1.jpg
    sscursoroff1.jpg
    24.6 KB · Views: 64
  • sscursoroff2.jpg
    sscursoroff2.jpg
    43 KB · Views: 66
  • sscursorhover1.jpg
    sscursorhover1.jpg
    24.7 KB · Views: 66
  • sscursorhover2.jpg
    sscursorhover2.jpg
    62.7 KB · Views: 66
Now I look like a lunatic,
No:)
You are right, I get the aria and bottom also while on the label (and tooltip is showing).

But I can't replicate the issue.

Is it also in the backend?
 
I use Fabrik in the frontend, but will do some additional checking in the backend and will get back with more info. The biggest problem is: it happens very irregularly, so it's impossible to catch it on demand. I enclose the situation, where on load I get disply: none for the label (for no reason, and it disapperars after refreshing... almost always, because sometimes it doesn't and I have to refresh form 2-3 times).
 

Attachments

  • ss1.jpg
    ss1.jpg
    116.2 KB · Views: 73
Alrighty, it's been a while, but I finally pinpointed the situation where labels go missing. It seems like I'm simply too fast.

Check this out: go in backend fo Fabrik->Forms and IMMEDIATELY after the page loads, ride your pointer over the forms' names. In my case the labels of these 'hovered' forms disappear. Seems like I have to be careful not to have my pointer over any potential label, when the form loads. This anomaly lasts around 1s after the page loads.

My workaround is to force labels with tips not to disappear no matter what (CSS with !important).
 
I can confirm the issue. Haven't had time to troubleshoot, but approximately every 4th or 5th time on form load, first or second element's label is hidden. Occurs with J4/J5 and latest F4.

Like @Trembowiecki mentioned, workaround is to add display:block!important; to element labels.
 
I still can't replicate. But it's at least two of you :)

Where did you put the CSS, custom_css.php in form template?
 
Made some more tests and I can confirm also this:
Check this out: go in backend fo Fabrik->Forms and IMMEDIATELY after the page loads, ride your pointer over the forms' names. In my case the labels of these 'hovered' forms disappear. Seems like I have to be careful not to have my pointer over any potential label, when the form loads. This anomaly lasts around 1s after the page loads.

And another issue I noticed is that when you hover your mouse on the label (which has tooltip) right after the form has loaded, the tooltip does not disappear anymore when you "unhover" your mouse.

I somehow have a feeling those two things are related. But a bit challenging to troubleshoot.
 
The backend form labels also have tooltips.

Can you see this behaviour on backend list labels (no tooltips but only a "title" showing on hover)
or on elements parent/child icon (also tooltips)?

Is this with all browsers?
 
List labels (no tooltips) = all good. Parent/child icons = disappearing anomally on hover.

Tested browsers: Chrome, Firefox, Edge - each one has these disappearing labels.
 
Last edited:
Yup, it's browser independent and happens also in the back-end. It is easy to replicate with slower connection or simulating slower connection with setting Network Throttling e.g. to Fast 3G in browser console.
 
Yes. So it seems to be some loading issue.
JS and loading and synchronizing is really not my field...

I tested if it may be related to the renderlabel override used in the backend, but it is not (uff; but it would be astonishing anyway because the issue is also in frontend).
 
Unfortunately it's also not my best expertise :(. Anyway I will also try to investigate more in coming days when I have a bit of time.

Just some more info that when the issue happens, it refers to mootools.ext.js in the console and it seems "Fabrik" is not loaded when the bootstrapversion check is being done:

1715335625841.png
 
Mootools :(
But it is our own version anyway.
Maybe this condition can just be removed.
Or we can find the spot where it's calling mootools and replace with jQuery or better original JS.
 

Members online

No members online now.
Back
Top