Jotform stops tooltips in Bootstrap 3

Hello,

I am using Dreamweaver and Bootstrap 3 to build my website and would like to include JotForm forms on some of the pages. I have embedded the forms using the Dreamweaver code from your embed section. I inputted the injected css into a separate css file that I can link the pages to so that I can make any css changes in one place.

I also use tooltips from bootstrap on the same pages as the forms, and have noticed that the tooltips don't work when the jotform javascript is present. I have located some 'stopTooltips' code in the file jotform.forms.js, which is what I think might be causing this conflict. I don't fully understand javascript and didn't want to mess with the code.

Am I correct in assumming this? And is there an easy way of changing the tooltip id?

Many thanks,

Mike.

Hi Mike,

Unfortunately, you did not mentioned the URL of your dreamweaver website where we can at least take an actual test of the form you have embedded. Most of the common caused of failure in some of the script embedded code is js script conflict between the page and those of the form.

If there is a way for you to embed the form instead using its iframe code you might also try that. Follow this user gui -Getting-the-Form-iFrame-Code .

See if this makes any difference.

In any case, we will wait for your updated response on this.

Thanks!

Hello Jonathan, thanks for your reply. I have been building the website on my computer and haven't hosted it anywhere yet. The Bootstrap framework is here: 

The iframes work with the tooltips. However, I had to add another css class so that the form displayed properly:

.jotform {

height:800px;

width:100%;

padding:0px;

margin:0px;

border:none;

overflow: scroll;

}

Otherwise it would only display the very top portion of the form.

I would like to be able to edit the injected css for all forms on the site in one place. Is it possible to do this with iframes?

A good idea would be to have the ability to select/tag forms in your account and then apply injected css to all of them at once. I have lots of forms and have to edit them all separately, which takes a while...! Is this functionality already available?

Many thanks,

Mike.

Hello Mike,

It seems that embedding your form with its iFrame embed code has resolved your issue.

Unfortunately, it is currently not possible to inject custom css code together for all your forms. You will have to manually load your form in edit mode and then inject custom css code required.

Do get back to us if you have any questions.

Thank you!

Hello Ashwin, thank you for your reply. There is a js conflict between the tooltips in Bootstrap and those in JotForm. Is there a way to resolve this by either altering the js files or using .noconflict? If so, how would I do this?

Many thanks!

You shouldn't have a conflict with other JS libraries if you are using the iFrame version of the form

If this is not the case and if the conflict is between jquery and our form's code ( which is java prototype), then you should find the last line of jquery code that is prior to the jotform's code and add this function:

<script>jQuery.noConflict();</script>
 

Let us know should you need further help about this. For unrelated questions, please open a new thread.

Hello Jeanette, thank you for your reply.

If I use the iFrame option, is there a way to stop the vertical scroll bars appearing on the iFrame and instead for the form to push the other page elements down as it expands (due to tooltips appearing, etc.), like it does when it's embedded?

Many thanks!

To avoid seeing the scroll bars while using iFrame, set "scrolling" declaration to "no"  and increase the "height" .  However, if your form got several pages and not all the pages got the same height, users will see a gap when they reach the shorter ones.

Does that help? Otherwise let us know.