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

    Is the a way to control where the hint appears

    Asked by liverpoolgsd on February 19, 2012 at 04:34 PM

    I enabled the hover text, The problem I have is the window covers the drop down arrow on the selctions, resulting that the options can't be selected.

    I have had to put the hover text information  ("Before we can book you on a course we need to first see" ....) on the webpage with an arrow pointing to the option, but depending on the browser or magnifictaion on the browswer it doesnt always line up, so it's not ideal.

    Is there a way of controling the position of hover text window? so it doesnt obscure the arow on a drop down selction. It also seems to be cut in half too. I would like to have it hover. 1) more to the left, and above (or below) the arrow selector so it can be selected.

    Thanks I hope I have explaine it ok.

    Regards

    Vince

    Page URL:
    http://www.liverpooldogtrainingclub.co.uk/#/contact-us/4554786113

    Screenshot
    problem
  • Profile Image
    JotForm Support

    Answered by abajan on February 20, 2012 at 07:33 PM

    Yes, it can be re-positioned. Moving the hover text box is a "piece o' cake". It's moving its arrow that's the tricky part. However, I'll see what I can do and get back to you soon.

  • Profile Image
    JotForm Support

    Answered by abajan on February 20, 2012 at 08:15 PM

    Okay. Adding the following rules to the form's current injected CSS will reposition the box above the drop down in question:

    .form-description {
    top: -200px;
    left: 5px;
    min-width: 150px;
    }

    .form-description-arrow {
    border-color: #CCC transparent transparent transparent;
    left: 24px;
    top: 204px;
    }

    .form-description-arrow-small {
    border-color: #F5F5F5 transparent transparent transparent;
    left: 27px;
    top: 200px;
    }

    When you're done, the box should appear in the same position as that in this clone of your form. Do let us know if this is a satisfactory position.

  • Profile Image

    Answered by liverpoolgsd on February 21, 2012 at 02:26 AM

    You are good.

    Is there a way to increase the font size within the hoverbox? That should be an easy one for you.

  • Profile Image
    JotForm Support

    Answered by idarktech on February 21, 2012 at 03:50 AM

    Hi there,

    Please add this code to your form:

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

    Just increase 15px if you want a huge font :)

    Hope this helps. Just let us know if you have further questions. Thank you so much!

  • Profile Image
    JotForm Support

    Answered by abajan on February 21, 2012 at 04:27 AM

    While what my colleague stated is correct, increasing the font's size will increase the length of the box, causing it to obscure the drop down to which it is supposed to be pointing. Also, the arrow will now be inside the box instead of on its edge.

    The easiest fix for this (in the case of a font size of 15 pixels) would be to increase the minimum width (min-width) of the box to 300 pixels. To do that, change the value of the third declaration in the .form-description rule as follows:

    .form-description {
    top: -200px;
    left: 5px;
    min-width: 300px;
    }

    Of course, the value required would vary according to the font size. The idea is to increase the width of the box until the height reverts to its original length.

  • Profile Image
    JotForm Support

    Answered by abajan on February 21, 2012 at 05:34 AM

    Further tests have revealed that in some instances both the arrow and box would need to be re-positioned. For instance, in the case of a 14 pixel font size and a box width of 300 pixels, the values of the top declarations would need to be altered as highlighted below:

    .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;
    }

    You will notice that the values in the .form-description and .form-description-arrow-small rules match, except that one is negative and the other positive. Also, the value of the top declaration in the .form-description-arrow rule should always be 4 pixels more than that in the same declaration of the .form-description-arrow-small rule. The preceding applies to downward pointing arrows and different rules would likely be needed to re-position arrows on the top, right and left edges of a hover-text box.

  • Profile Image

    Answered by bayviewboom on August 14, 2014 at 02:13 PM
  • Profile Image
    JotForm Support

    Answered by david on August 14, 2014 at 04:47 PM

    Hi,

    It does not appear as though your post has gone through completely.  However, please create a new thread for new questions and we will be happy to help.

    Thank you for using JotForm!