How to ensure no text wrapping in Hoover text?

  • Profile Image
    ipbr21054
    Asked on August 26, 2018 at 05:36 AM

    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

    Screenshot
  • Profile Image
    ashwin_d
    Answered on August 26, 2018 at 07:41 AM

    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.

  • Profile Image
    ipbr21054
    Answered on August 26, 2018 at 07:42 AM

    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.



  • Profile Image
    DonaldHag
    Answered on August 26, 2018 at 09:00 AM

    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

  • Profile Image
    ipbr21054
    Answered on August 26, 2018 at 09:01 AM

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

  • Profile Image
    DonaldHag
    Answered on August 26, 2018 at 10:18 AM

    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.





  • Profile Image
    ipbr21054
    Answered on August 26, 2018 at 01:52 PM

    Thanks,

    Any advice for this part


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

  • Profile Image
    Nik_C
    Answered on August 26, 2018 at 03:06 PM

    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:

    1535310376Screen Shot 2018-08-26 at 9.04

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

    Thank you!

  • Profile Image
    ipbr21054
    Answered on August 26, 2018 at 03:12 PM

    CENTER above the field that it applies to

  • Profile Image
    Nik_C
    Answered on August 26, 2018 at 03:19 PM

    If you want to have it like this center: 

    1535311043Screen Shot 2018-08-26 at 9.17

    Then please insert the below CSS:

    .form-description {

        top: -44px!important;

        left: 152px!important;

    }

    Thank you!

  • Profile Image
    ipbr21054
    Answered on August 26, 2018 at 03:19 PM

    Hi,

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

    Currently it is to the right

    15353111674282.jpg

  • Profile Image
    ipbr21054
    Answered on August 26, 2018 at 03:21 PM

    My friend i type as i receive file.

    It now is ok.


    Does this have affect on mobile photo ?

  • Profile Image
    ashwin_d
    Answered on August 26, 2018 at 03:42 PM

    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 

  • Profile Image
    jonathan
    Answered on August 26, 2018 at 05:41 PM

    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.

    1535319662zzz 2018-08-27 05.38.11.png


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