What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Adjust different hover text boxes at the same time

    Asked by ahmedaallam on October 08, 2014 at 02:05 PM

    Hi,

    I tried to follow your instructions on some of the questions that have been asked before but i can not control more than one hover text box and i wonder in my case how can i fix the size of the box to be wider to fit and look appealing? 

    I have the hover text on the (? mark)

     

    please advise,

     

    Page URL:
    http://form.jotform.us/form/42725136223145?

    Screenshot
    different text boxes same size wider follow
  • Profile Image

    Answered by Shadae on October 08, 2014 at 06:20 PM

    Hi ahmedaallam,

    To confirm, you would like to change to size of the hover box in your form?

    If that is the case You can use this CSS code to increase the width of the hover text box.

    .form-description {

       width: 175px;

    }

    You can change the pixel size to your desired width.

    You can read how to inject the CSS code here: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

     

    I hope this helps! Please inform us if you need further assistance.

  • Profile Image

    Answered by ahmedaallam on October 08, 2014 at 06:43 PM

    Hi,

    It did not work in my case and i am looking for a way yo adjust every single hover box by itself, so one code can not adjust all boxes at the same time as some have few words while the others have more words!

  • Profile Image

    Answered by Shadae on October 08, 2014 at 09:37 PM

    Hi ahmedallam,

    To change the text box size, you will need to look up the "Inspect Element" for each hover box.

    To get this you would right-click on the hover box and select "Inspect Element"

     

    Once you gather the codes, you would add the code from each box. The code would look like this:

    #cid_139.form-description {

       width: 175px;

    }

    Please inform us if this assist you in achieving your desired result.

  • Profile Image

    Answered by ahmedaallam on October 10, 2014 at 06:07 PM

    Hi Shadea,

    Thank you so much but its not working in my case unfortunately!

    Here are the CSS i have 

    ----------------------------------------------------------------

    .form-line { background: none; }

    .form-pagebreak{

    background:  transparent  !important;

    }

    .form-description {width:175px;}

    #label_144,#label_145,#label_146,#label_147,#label_148,#label_149,#label_150{ width:300px!important; border:1px dotted black;}

    .form-description-content{font-size:14px;}

    .form-all {

    background:

    url(#FFFFFF)

    repeat top left fixed;

    }.form-header-group {

    color:#000;

    background:0099FF;1px

    }.form-header {.form-description {

    top: -173px;

    left: 5px;

    min-width: 300px;

    }

    .form-description-arrow {

    border-color: #CCC transparent transparent transparent;

    left: 24px;

    top: 177px;

    }.form-description-arrow-small {

    border-color: #F5F5F5 transparent transparent transparent;

    left: 27px;

    top: 173px;

    }.form-description-content {

    font-size: 14px;

    }.form-required {

    color: white !important;

    }#cid_139.form-description {width: 350px;}

    ----------------------------------------------------------------------

    maybe i have a code is contradicting the function!

    I need to make the box wider and shorter, the arrow touch the ? mark and towards the right or left depending on the location of the ? mark.. 

    please advise,

    best,

  • Profile Image
    JotForm Support

    Answered by Kiran on October 10, 2014 at 09:37 PM

    Hello,

    Please see the cloned form of yours with a few changes.

    http://www.jotformpro.com/form/42827581403960

    Following are the screenshots of different hovered descriptions

      

    Following is the part of injected CSS that is used 

    - to align the description to the right of Question mark

    .form-description {

    right: -157px !important;

    top: 1px !important;

    }

    - to change the width of description as required 

    #id_138 > div.form-description {

    width: 200px !important;

    max-width: 200px !important;

    right: -207px !important;

    }

    You may clone the form to your account and make necessary changes as you need. Please let us know if you need further assistance. We will be happy to help.

    Thank you!!

  • Profile Image

    Answered by ahmedaallam on October 10, 2014 at 10:49 PM

    Hi Kiran,

     

    That is an amazing job you did, i really appreciate it soooo much. 

    Thank you so much indeed.

     

    best,

  • Profile Image

    Answered by Ben on October 11, 2014 at 06:16 AM

    Hi,

    In my colleague's name your are welcome. I am glad that the provided solution worked for you just the way you wanted it.

    If you have any further questions please do let us know and we will be glad to assist you in setting everything up properly.

    Best Regards,
    Ben