tooltip issue

[FilMar]

I have a problem now with the tooltips in the frontend.
They show the html code as text

Here on the password field but the same on other fields.

I have the latest joomla version and use the Helix III template (and also with Helix Ultimate)
and I have installed the bootstrap3 JLayouts

Any suggestions?

 

[Sophist]

I think this may be because BS3 does not allow HTML in tooltips by default.

Can you try changing line 28 of fabrik-element-label.php from:

<label data-uk-tooltip for="<?php echo $d->id; ?>" class="<?php echo $d->labelClass; ?>" <?php echo $d->tip;?>>

to

<label data-uk-tooltip for="<?php echo $d->id; ?>" class="html <?php echo $d->labelClass; ?>" <?php echo $d->tip;?>>

and see if it works...

See https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php

 

[cheesegrits]

@Sophist Couple of things ...

You seem to be quoting the UIKit overrides. Helix 3 isn't uikit.

We already apply the html option in the tip JS ...

https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/tipsBootStrapMock.js#L71

It works OK for me in Helix 3 ...



@FilMar - can you point us at the form?

-- hugh

 

[Sophist]

Ah. Well that was my best guess - I couldn't see any other obvious cause. It could be double HTML encoding, but I couldn't see why that would apply only to BS3.

 

[cheesegrits]

I've seen this happen before, but it's usually related to creating them on the fly in AJAX response handling.

Which is why I need to see the form. It's usually pretty easy to find the reason when you can stick a breakpoint somewhere ...

Which reminds me, @FilMar - if you can point us at the form, can you enable Fabrik debug (global settings), so I can get the uncompressed JS.

-- hugh

 

[FilMar]

hugh,

Here is a form with the trouble: https://wjbc.kofide.be/locaties-lijst
when you click now on the magnifiyng glass (after one of the entries in the list), you get a popup and there is a field with a tooltip.

When I open this form in the backend, it works OK. Here in the frontend with Helix III I get the html code and when I open this form under Helix Ultimate (BS4, what should be the goal), I have no tooltip.

In the backend I see this code:
<label for="bc_locaties___locatie" class="fabrikLabel control-label fabrikHover fabrikTip" opts="{"formTip":true,"position":"top","trigger":"hover","notice":true}" data-original-title="">
<i data-isicon="true" class="icon-question-sign small "></i> locatie </label>

In the frontend I see this code:
<label for="bc_locaties___locatie_ro" class="fabrikLabel control-label fabrikHover fabrikTip" data-toggle="popover" data-trigger="hover" data-placement="top" data-title="" data-content="<ul class="validation-notices" style="list-style:none"><li>
<span data-isicon="true" class="fa fa-question-circle" ></span>
Locatienaam als plaats en eventueel volgnummer.</li></ul>" data-original-title="">

<span data-isicon="true" class="fa fa-question-circle small"></span>
locatie </label>

Is the tooltip not changed in BS3 (and BS4) as data-toggle="tooltip" in place of data-toggle="popover" ?

Many thanks in advance,

Filip

 

[troester]

Your form is showing a JS error
syntax error, unexpected '{'
and you have a hidden calc element xxx___icon which is permanently triggered (by ??)
Disable the calc, check your calc code ({ may be an unknown placeholder...)

 

[cheesegrits]

Yup. Almost certainly you have a placeholder in your calc which isn't quoted, so if nothing matches, it generates a syntax error. So you have something like ...

$foo = {yourtable___foo};

... which needs to be ...

$foo = '{yourtable___foo}';

-- hugh

 

[FilMar]

I have adapted the calc element (now: return 'pin' . '{bc_locat___kleur_raw}' . '.png' I was forgotten the quotes.
I use it to put different colored pins on the map.
I set the 3 calc buttons to NO.

But now I still have the same issue.

Many thanks inadvance,

Filip

 

[Sophist]

The HTML being downloaded for the label with the tooltip in the modal popup (taken from the Ajax response) is:

<label for="bc_locaties___locatie_ro" class="fabrikLabel control-label fabrikHover fabrikTip"  data-toggle="popover" data-trigger="hover"  data-placement="top" data-title="" data-content="&lt;ul class=&quot;validation-notices&quot; style=&quot;list-style:none&quot;&gt;&lt;li&gt;
&lt;span data-isicon=&quot;true&quot; class=&quot;fa fa-question-circle&quot; &gt;&lt;/span&gt;
Locatienaam als plaats en eventueel volgnummer.&lt;/li&gt;&lt;/ul&gt;">
 
<span data-isicon="true" class="fa fa-question-circle small" ></span>
locatie        </label>

Does this match the requirements for BS3 as specified at https://getbootstrap.com/docs/3.3/javascript/#popovers ?

I am unclear how you are generating this tooltip.

 

[Sophist]

I think the problem may be that data-title="" and so BS3 is using the data-content as the title and AFAIK titles are never treated as HTML.

What happens if you generate a data-title?

(That said, your original tooltip had a title which is why I discounted this possibility then. However now it no longer has a title.)

 

[FilMar]

Still stuck with this one.

The tooltip is generated by entering a tip in the element options.

Greetings,

Filip

 

[Sophist]

I just tried this on my site and it worked perfectly first time. But my Fabrik site is not BS3 and tips.bootstrapmock.js works differently on BS2 vs BS3.

 

[FilMar]

I think I found a solution.

I added data-html="true" in the bootstrap overrides for the label (element\fabrik-element-label.php)

Line 35 is now:
$tip = ' data-toggle="popover" data-html="true" data-trigger="' . $d->tipOpts->trigger . '" data-placement="' . $placement . '" data-title="' . $heading . '" data-content="' . $d->tipText . '"';

That seems to do the job.
When I did the changes 'online' (via F12) it didn't seems to work but now I found the file and changed it there with the good result.

I suppose that the same as to be done in the file element\fabrik-element-tip.php ...

Greetings,

Filip

 

[Sophist]

Ok - here's what I think is happening.

When you load the modal pop-up using ajax, the tooltips are not being applied by using the code in tipsbootstrapmock.js which sets html=true.

The window is loaded by the ajax call at media/com_fabrik/js/window.js#L440 which is called from media/com_fabrik/js/fabrik.js using getWindow. Something in is then adding the tips but without html=true, but I haven't yet managed to track down what code is doing that.

So I think it is a bug in Fabrik and not something wrong with the layout.

 

[FilMar]

@Sophist: if you think that it has to do with the fact that you have a pop-up here I can say that I had the same problem in another normal form to with the pop-ups for validation .

 

[Sophist]

@FilMar Without more detail it is difficult to know whether your problem is the same or different. You talk about pop-ups for validation, and this sounds like something quite different. If you would like help with it, please open a new topic and provide full details.

 

[FilMar]

@Sophist: I think we misunderstand each other. I just wanted to say that the problem with the tooltips was general, I had it here with a tooltip on a field in a modal popup but it was the same for the tooltips you have when you set some validation rules (in a 'normal' form that is no popup). The solution I found (with adding data-html="true") works for all tooltips I have.

Therefor I don't think the problem has something to do with the fact the tooltip is in a modal pop-up as I understand from your reply #15.

Greetings,

Filip

 

[Sophist]

@FilMar: Is your normal form problem BS2 or BS3? And is it in a repeat group?

P.S. Just because the symptoms are the same doesn't mean that the cause is the same. Fabrik is a complex beast with lots of different pieces of functionality that try to create a consistent interface. So it is equally likely that your problem is the same or different to this one.

P.P.S. Whilst it is great that users like you have the skills to fix e.g. tooltips not working on your site, I would encourage you to report it in the forums as a potential bug first so that if it is a bug we fix it and avoid other users experiencing the same problem.

 

[FilMar]

@Sophist: The other form is on the same site so also BS3 (Helix III) and not in a repeat group. It is in a tabbed form, I created a list with extra fields for the user registration.

You're right that the cause maybe different, but as I had the problem on both occasions, it is good for you to know that it is not only with the modal too, and I, knowing that, would first look at the tooltip code in general. But I understand what you try to say.

Where do I have to report this possible bug then?

Many thanks in advance,

Filip

P.S. I have a background in programming (but more in the VBA direction) and databases and some above basic notices of webdesign (HTML and CSS) but I know that my skills in php and JS are not as good as I would like to be. But I'm learning all the time...