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

    how do I change the location of the popup tab?

    Asked by Tim on November 23, 2011 at 12:31 AM
  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2011 at 03:38 AM

    If you are referring to hover texts, that's done via injected CSS using the .form-description selector. The specificity of your rules will depend on if you want to reposition all of the hover texts in the same manner or just those for certain types of fields or particular fields. Moreover, depending on where the hover texts are relocated, their arrows may also need to be repositioned. Here is a form whose hover texts are in different positions for different fields. Clone it and take note of the comments in its injected CSS.

    If you need help with a specific form, please provide its URL (if the form is embedded in a web page, give that page's URL instead) and state where you would like the hover texts to appear so that we can assist properly assist you.

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2011 at 05:33 AM

    Hang on... Were you talking about the Wishbox pop-up on the JotForm home page? I don't think that can be repositioned by users but others may have a solution.

    If you were not referring to neither hover texts nor the Wishbox tab, please elaborate.

  • Profile Image

    Answered by cheekyface on July 25, 2012 at 03:22 AM

    Hi.

    I may as well take over in the question asking here...

    Had a look at the form you linked to and I think it would solve my problem with hover text blocking the actual drop down list fields but I wanted to ask if I can inject css that will cover every field type without specifying the id tag?

    I figure I can use the code you injected in that form then adjust the ID tags for each field but I was hoping it could be simpler (for the sake of future forms) and be able to just add one rule per field type.  If the hover became a problem then it could be altered for just that one specific field by injecting the css relative to that field only? I suppose that is the case for me anyhow and I'm probably asking for what already exists?

    What I really need is to set a rule for the hover over 2 drop list fields only at this stage.
    So can I fix that just by applying the ID to the code from your example.

    This is a clone but it shows what I mean on page 7 (last page I think).
    the reason the hover is a problem is becasue I have two drop list fields side by side (which is what I want) so I suppose to have the hover text above would be best unless it's possible to have it on the side (left or right without covering the field itslelf and preventing anyone from selecting an option)?.

     

    I'll have a go on my original form to see if I figure it out but will look forward to hearing from you in the mean time.

    Thanks you.

     

  • Profile Image
    JotForm Support

    Answered by abajan on July 25, 2012 at 08:20 AM

    Hi again cheekyface

    Due to the nature of our form fields and hover text elements, I don't think it's practical to create a single set of hover text rules to cover all fields or even a certain field type (drop down selectors, in this case). For one thing, hover text boxes vertically expand after a certain number of characters is added to them. That's fine, so long as the box is to appear to the right or even bottom of the field. However, if the box is to be placed above the field, the vertical placement of its arrows would need to vary according to the number of lines of text the box contains.

    Have a look at this clone of your form. The following rules were added to its injected CSS to reposition the hover text boxes (and their arrows) attached to the drop downs to which you referred:

    /* Move boxes up above their fields */
    #id_62 .form-description,
    #id_64 .form-description {
    top: -125px;
    }

    /* Move outer arrow from left side to bottom */
    #id_62 .form-description-arrow,
    #id_64 .form-description-arrow {
    border-color: #CCC transparent transparent transparent;
    left: 65px;
    top: 119px;
    }

    /* Move inner arrow from left side to bottom */
    #id_62 .form-description-arrow-small,
    #id_64 .form-description-arrow-small {
    border-color: #F5F5F5 transparent transparent transparent;
    left: 68px;
    top: 115px;
    }

    Had I omitted the IDs and just injected

    /* Move boxes up above their fields */
    .form-description {
    top: -125px;
    }

    /* Move outer arrow from left side to bottom */
    .form-description-arrow {
    border-color: #CCC transparent transparent transparent;
    left: 65px;
    top: 119px;
    }

    /* Move inner arrow from left side to bottom */
    .form-description-arrow-small {
    border-color: #F5F5F5 transparent transparent transparent;
    left: 68px;
    top: 115px;
    }

    the hover text attached to the An approximate AGE range? field would have been adversely affected (as would those attached to the checkboxes, had they not had their own rules), moreso if the number of characters it contained differed enough to change the height of the box. (If you clone the form and place more or less text in that hover box, you'll see what I mean.)

    Another issue to consider is whether a field to which a hover text box is to be attached has been shrunk, as is the case of the drop downs in question, or not. Clone my form and expand one of the said dropdowns and see what happens to its hover text.

    In case you're wondering if the selectors couldn't just target dropdowns by preceding them with select or .form-dropdown, that's a "non-starter" too because hover texts are attached via JavaScript and the script uses IDs, not HTML tags or classes.

    Incidentally, you can find out the ID of most field types by clicking the field and then its Properties icon:

    Developer tools like Firebug will help even more.

    If you need clarification on anything, please let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on July 25, 2012 at 08:32 AM

    Oh, by the way, I spotted a typo in each of those dropdown's hover text: "...If you're event" instead of "...If your event". I made the correction in the clone but the An approximate AGE range? field's hover text still has the error.

  • Profile Image

    Answered by cheekyface on July 25, 2012 at 09:16 AM

    Hi Abajan.

    Thanks so much for that.  I just slotted the code you created into the right spot and it works perfectly.

    I tried to do it from the example you had used at the top of this thread but I couldn't get it right.  Thanks again!!

     

    ...and for the typo's!!  Fixed them too!

  • Profile Image
    JotForm Support

    Answered by abajan on July 25, 2012 at 10:51 AM

    Glad to help.

    Cheers