Disappearing labels with tooltips

[Trembowiecki]

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?

 

[troester]

Which J! template? Is it also in the backend?

 

[Trembowiecki]

Haven't checked backend yet, (I use the form on the frontend), as for the template - Cassiopeia.

 

[wezetel]

Maybe this is related to this thread ?

Tooptip disappears between rows in textarea element

Hi, i have a listview with an textarea element. The text inside this element has multiple rows, because its quite long (in the case of the picture: 3 rows). If i add a tooltip to this element, then the tooltip only appears, when i move the mouse exactly over the text. The tooltip disappears...

fabrikar.com

 

[Trembowiecki]

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.

 

[troester]

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?

 

[Trembowiecki]

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.

 

[troester]

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?

 

[Trembowiecki]

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).

 

[Trembowiecki]

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).

 

[juuser]

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.

 

[troester]

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?

 

[Trembowiecki]

I still can't replicate. But it's at least two of you

Yay!

Where did you put the CSS, custom_css.php in form template?

Nah, I use Cassiopeia CSS (user.css).

 

[juuser]

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.

 

[troester]

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?

 

[Trembowiecki]

List labels (no tooltips) = all good. Parent/child icons = disappearing anomally on hover.

Tested browsers: Chrome, Firefox, Edge - each one has these disappearing labels.

 

[juuser]

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.

 

[troester]

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).

 

[juuser]

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:

 

[troester]

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.