How to ensure no text wrapping in Hoover text?

Hi,

Here is the form in question http://form.jotformeu.com/form/72754230984361

The field in question is called Paypal Email For Invoice

When the hoover text bubble appers it wraps the text.

How can the text be shown on one line only and not wrap the text.

See the form and also my attached photo

Thanks

Please inject the following custom css code in your form and that should solve your problem:

.form-description {

    max-width: 227px !important;

}

The following guide should help you how to inject custom css code in form:   https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hope this helps.

Do get back to us if you have any questions.

Hi,

Just to add to this before i inject.
I would like it be shown center of the form / middle etc so its not off to one side.

To center your form, look for this CSS in the form designer:

.form-all {

    border : 3px solid #0099FF !important;

    border-radius : 50px !important;

    margin-left : 20px;

}

Remove the margin-left:20px; line so the final should look as follows:

.form-all {

    border : 3px solid #0099FF !important;

    border-radius : 50px !important;

}

This will center your form. 

Refer to this guide on injecting custom CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

I dont wish to center the form i wish to center the hoover message

Hi,

I have the code shown below.

However 2 things do not work correctly.

Font size does nothing when 20px,25px,30px is selected.

How do i have this hoover message show above the field it is applied to & also central.

.form-description {

    max-width : 230px !important;

    background-color : red;

    border-color:black;

    border-width:2px;

    border-radius:10px;

    color : black;

    font-size:20px !important;

    font-weight : bold;

}

To change the hover font-size, add the following CSS:

.form-description-content {

    padding: 20px !important;

    font-size: 25px !important;

    color: #fff !important; }

The code will change the padding, font-size and color of the hover message.

Thanks,

Any advice for this part

How do i have this hoover message show above the field it is applied to & also central.

You can insert the below CSS to your Custom CSS field: 

.form-description {

    top: -39px!important;

}

That will make the hover text show like this:

Let us know if that is what you had in mind.

Thank you!

CENTER above the field that it applies to

If you want to have it like this center: 

Then please insert the below CSS:

.form-description {

    top: -44px!important;

    left: 152px!important;

}

Thank you!

Hi,

The hoover text needs to be CENTER over the field in quester,see photo please.

Currently it is to the right

My friend i type as i receive file.

It now is ok.

Does this have affect on mobile photo ?

Please inject the following custom css code for mobile device:

@media only screen and (max-device-width: 480px){

.form-description {

    top: -12px !important;

    left: 25px !important;

}

}

The following guide should help you how to inject custom css code in form:   https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Hi,

I am applying the following code to 3 different forms.

The forms are as follows,

72754230984361

62115565434352

81205669184360

The code used for the hoover text is shown below and applied to each of the 3 forms as mentioned above.

Will i need to apply new setting for the mobile device like,max width,padding etc etc.

To be honest when i get involved in this mobile code i mess it up & spend hours trying to put it right.

Does the customer code you supplied just go below what i have so far ?

Maybe you could look at my code and insert / advise please.

.form-description {

    max-width : 270px !important;

    background-color : red;

    border-color : black;

    border-width : 2px;

    border-radius : 10px;

    color : black;

    font-weight : bold;

}

.form-description-content {

    padding : 10px !important;

    font-size : 12px !important;

    color : #FFFFFF !important;

}

.form-description {

    top : -3px!important;

    left : 152px!important;

}

You can also test your forms using mobile browsers to better have a preview of how the hover text perform on live form on mobile.

I did test on your form, and so far the mobile browser view is working how it was suppose to.

Here is a screenshot from mobile browser.

I hope this help. Let us know if you need further assistance.