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

    Changes to appearance and position of the 'hint text' bubble

    Asked by Benflips on July 15, 2016 at 08:00 PM

    Some time ago, I advised that if I had hint text on fields at the bottom of a form screen, that the 'bubble' of the hint text got cut off and was not displayed.

    I got some code given to me which effectively 'raised' the bubble - which worked, but was a bit ugly, because of the pre-defined appearance of the bubble (which has a little 'arrow' in the bubble, and now doesn't point to the field in question).

    I've since found that this problem (the 'cut off' and non-display) also affects fields on the right margin of a form page too. I've attached a screenshot to show what I mean.

    I'm wondering a couple of things...

    Is it possible to have the hint box appear 'above' the relevant field, rather than to the right of it?
    Is it possible to change the custom shape/border of the 'bubble' to change where the 'arrow' is in the border or to reduce the point-thickness of the border?
    Is it possible to change the color - the background grey is ugly! 

    Page URL:
    https://form.jotform.co/43420990799871

    appearance hint JotForm hint text hint bubble hover text hover bubble
  • Profile Image
    JotForm Support

    Answered by Boris on July 16, 2016 at 04:08 AM

    Yes, we can change the appearance of your hint bubbles with some custom CSS. The following CSS will position the bubble just above its question:

    .form-description {
        top: -44px !important;
        right: auto !important;
    }

    The following CSS will move the arrow from the left side of the bubble to the bottom of the bubble, where #f5f5f5 should later be changed to match the background color of the bubble:

    .form-description-arrow-small {
        left: 3px !important;
        top: auto !important;
        bottom: -14px;
        border-color: #f5f5f5 transparent transparent !important;
    }
    .form-description-arrow {
        left: 0 !important;
        top: auto !important;
        bottom: -23px;
        border-color: #ccc transparent transparent !important;
    }

    The following code will change the background color of the bubble, where you can use any valid CSS color in place of #def to set your own desired color:

    .form-description {
        background-color: #def !important;
    }

    Note that the arrow and background should use the same color, and here is the full custom CSS to use on your form to make those changes:

    .form-description {
        top: -44px !important;
        right: auto !important;
        background-color: #def !important;
    }
    .form-description-arrow-small {
        left: 3px !important;
        top: auto !important;
        bottom: -14px;
        border-color: #def transparent transparent !important;
    }

    .form-description-arrow {
        left: 0 !important;
        top: auto !important;
        bottom: -23px;
        border-color: #ccc transparent transparent !important;
    }

    You can apply custom CSS to your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    It would make the bubbles appear like this:

    Please try it out and let us know should you need further assistance.

  • Profile Image

    Answered by Benflips on July 16, 2016 at 07:45 AM
    Thanks Boris.
    I've just applied this, and it is a really good start.
    I've used the same dark purple for all three sections in your suggested
    code, which I need to change later, but how do I change the outer grey
    border colour, and how to I change the colour of the text?
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image

    Answered by Benflips on July 16, 2016 at 09:31 AM

    Another problem I've encountered on testing though...it is too close to some controls - it appears that radios are most affected, the arrow overlaps the first radio and makes it very difficult to activate that button

  • Profile Image
    JotForm Support

    Answered by Boris on July 16, 2016 at 10:56 AM

    We can move the down arrow further to the right, more towards the middle of the bubble, by changing the value of "left" for .form-description-arrow-small and for .form-description-arrow, so that the change would look similar to this:

    .form-description-arrow-small {
        left: 53px !important;
        top: auto !important;
        bottom: -14px;
        border-color: #def transparent transparent !important;
    }

    .form-description-arrow {
        left: 50px !important;
        top: auto !important;
        bottom: -23px;
        border-color: #ccc transparent transparent !important;
    }

    We can change the border color of the bubble from gray into anything else by applying "border-color" on .form-description, so the code we would use would look like this:

    .form-description {
        border-color: #def;
    }

    Finally, to change the text color inside the bubble, we would apply a "color" to the element .form-description-content:

    .form-description-content {
        color: #AAEB0F;
    }

    After making these changes to the previously provided code, your entire code for the hover text bubbles would look like this:

    .form-description {
        top: -44px !important;
        right: auto !important;
        background-color: #411A99 !important;
        border-color: #411A99;
    }
    .form-description-content {
        color: #AAEB0F;
    }
    .form-description-arrow-small {
        left: 53px !important;
        top: auto !important;
        bottom: -14px;
        border-color: #411A99 transparent transparent !important;
    }

    .form-description-arrow {
        left: 50px !important;
        top: auto !important;
        bottom: -23px;
        border-color: #411A99 transparent transparent !important;
    }

    Please try it out and let us know how it goes.

  • Profile Image

    Answered by Benflips on July 17, 2016 at 01:45 AM
    That is brilliant, thank you!
    There still remains the issue (although I may have asked about it on a
    different thread) about the hint bubble being 'hidden' or cut off if a
    field is in a 'highlight' or 'error' state.
    And while the arrow has moved away now from the check or radio (which is
    great!) it still seems like the focus on that check or radio is difficult
    to achieve - example if you want to try to replicate this...on page one,
    really easy to click checks 2-5, but I can't seem to actuallly check number
    1 until I've checked the others!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on July 17, 2016 at 06:01 AM

    You're right, I was able to reproduce it.

    Append this CSS codes, this should fix this problem.

    .form-line-error, .form-line-active{

    overflow: initial !important;

    }

    With regards to the checkbox buttons, I can easily click them.

    Hope this helps!

  • Profile Image

    Answered by Benflips on July 17, 2016 at 06:45 AM
    Hi. I've done the code you've discussed.
    I can also click checks 2-5 easily, it is 1 that is sometimes a problem.
    And I have a similar problem later in the form with several radios.
    Is there some code to 'raise' the hint bubble maybe 5 or 10px further above
    it's current position, for me to test and see if it is still a problem?
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on July 17, 2016 at 06:55 AM

    Yes you can. From my colleague's CSS codes, under .form-description class, you can change the -44px value on  this line  top: -44px !important;  with the value you want. You can adjust it until you get the desired output.

    You can try -70px, the bubble should position just on top of the field label which I think looks pretty good.

  • Profile Image

    Answered by Benflips on July 17, 2016 at 06:45 PM
    Thanks. I did -60. Looks good.
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...