Dynamic form tooltips stop working with usableforms.js

Hi,

I've been experimenting with dynamic forms to reduce the length of an increasingly long form.

I have followed (to the letter) Bob's advice in question 47 of the Chronoforms FAQs (http://www.chronoengine.com/faqs.html#TB_inline?height=500&width=650&inlineId=cccontent_47_box), installing v2 of usableforms.js and changing to a DIV tag.

The dynamic form works - the fields are hidden/revealed exactly as expected.

The problem I've noticed is that the tooltips on the form have stopped working. They show the icon, but the text is displayed below the relevant field, instead of when the mouse is moved over the icon.

I'm guessing (from reading other posts to do with tooltip issues) that it's some kind of Javascript conflict (perhaps with Mootools?).

I'm hoping that by asking this fairly simple question in a new topic (with usableforms.js in the title!) that the answer will help anyone else who experiences this.

Thanks for your help -

Barry

Hi Barry,

I can see that the tooltips aren't working -- but at the moment I can't see why. There are no obvious Javascript errors and no obviously duplicated variable or function names. I need to dig some more.

Bob

PS I have now written up the UsableForms method in more detail here Once I've cracked the ToolTips I'll update the document with that info too.

Thanks, Bob.

Do you have any idea when this might be? Just wondering whether to abandon this for now and focus on other things or wait for a resolution - so I can manage the client's expectations.

Thanks & best regards -

Barry

Hi Barry,

My apologies, I got caught up with some other issues and this one slipped through the memory net.

The problem was a duplicated function name (addEvent). I've renamed the Peter-Paul Koch version to addEventUF in the attached copies and the ToolTips appear to be working OK.

Please unzip and replace the includes/js folder contents (or at least the two .js files).

Bob

Hi, Bob,

Thanks for your reply.

Just to be clear:
The usableforms.js I have currently is in the components/com_chronocontact/js/ folder (as per the instructions in FAQ 47).

Your last post says I should replace the files in the includes/js folder.

Should I assume that you mean the components/com_chronocontact/js/ (not "includes") where the usableforms.js is currently?

I also note that you have introduced an underscore ("_") in the filename ("usable_forms.js"). Is this differentiate it from the previous version? Is there any significance in this? Can/should it be renamed to "usableforms.js" without the underscore? If left with the underscore, I assume that I would need to change the reference to the file at the top of the form to include the underscore.

Hope I'm not being too pedantic...

Barry

Hi Barry,

Since the FAQ was posted a year or so ago I have re-worked all of this code to include validation as well. My previous post was based on this help document which does use different file names and locations.

That said, neither the name nor the location is important provided that the code used to load it points to the correct folder and file i.e. one that exists and is up to date.

Bob

Hi again, Bob,

I think I'm missing something. I haven't downloaded your document (yet), but in the mean time...

I've renamed usableforms.js to usableforms.js.old and uploaded your four files to the components/com_chronocontact/js folder.

I've modified the form code in the form entitled "DynamicFieldsTest" to begin with

<script type="text/javascript" src="/components/com_chronocontact/js/usable_forms.js"></script>

This appears to make no noticeable difference though: the form still hides/unhides correctly 8) but the tooltips don't - their text is still displayed on the next line after the tooltip symbol😟

Barry

Hi Barry,

Please post a link to the form so I can take a quick look.

Bob

Hi, Bob,

It's at http://www.londonmasterclasses.com/index.php?option=com_chronocontact&chronoformname=DynamicFieldsTest.

Clicking on the "I would like to apply for a bursary" checkbox reveals tooltips whose text is incorrectly shown below them.

Thanks -

Barry

Hi Barry,

As far as I can see the form isn't loading the customclasses.js and tooltip.css files that drive the tooltips. You can either turn on "Load ChronoForms JS/CSS files" or add the include lines in the Form HTML to add them 'manually'.

Bob

Genius! Solved. Thank you!

Sorry for hijacking this thread. I use usableforms, but now my tooltips doesn't work anymore. I think its because they both use rel in the html tags. Is there something I can do to make this work?

Hi PicoPaco,

Could be, impossible to tell from here. Please post a link to the form so I can take a quick look.

Bob

Okey Bob, I'll send you a PM with the information. Thanks

Hi PicoPaco,

Just about to go to dinner but took a very quick look. Is the Tooltips script loading on the page at all?

Bob

What I can see it's the same files loading on this as another form I got where tooltips works fine. But I'll go with the joomla tooltip instead http://docs.joomla.org/How_to_add_tooltips_to_your_Joomla!_website, this works for me.

Thanks for your time Bob.