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

    Modifying size of Hover Text balloon/font

    Asked by RickGregory on October 12, 2014 at 01:22 PM

    Is there a way to enlarge the balloon so that the message is more bold and visible to the user?

    Page URL:
    http://creativewirewear.com/contents/en-us/contactus.html

    Screenshot
    size font message hover text custom hover form-description
  • Profile Image
    JotForm Support

    Answered by jonathan on October 12, 2014 at 03:02 PM

    Hi,

    You can achieve that by using injected custom CSS code into your jotform  http://www.jotform.us/form/32664297992167

    Try this CSS code

    .form-description {

    z-index: 1000;

    position: absolute;

    max-width: 215px !important;

    border: 4px solid #ccc;

    border-radius: 6px 6px;

    box-shadow: 0px 2px 4px #666;

    background: #f5f5f5;

    white-space: normal;

    }

     

    .form-description-content {

    font-size: 20px;

    color: #333;

    }

     

    The value max-width: 215px !important;  and  font-size: 20px; were for the balloon width and the font-size

    Using this code will make the hover text look like this

     

    Hope this help Inform us if you need further assistance.

    Thanks.

     

     

     

  • Profile Image

    Answered by RickGregory on October 12, 2014 at 03:21 PM
    I’m still getting this message when using your embedded link:

    What are the step to get to this page directly from within your site?


    ...
  • Profile Image

    Answered by RickGregory on October 12, 2014 at 03:41 PM
    I see where to modify the CCI code. Do I just paste the code you provided at the end of what I already have?


    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on October 12, 2014 at 04:02 PM

    Hi,

    Here is the full URL link http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    just in case you are still having issue opening it.

    --

    And Yes -- add or append at the bottom of your existing CSS codes the code I had provided.

    .form-description {

    z-index: 1000;

    position: absolute;

    max-width: 215px !important;

    border: 4px solid #ccc;

    border-radius: 6px 6px;

    box-shadow: 0px 2px 4px #666;

    background: #f5f5f5;

    white-space: normal;

    }

     

    .form-description-content {

    font-size: 20px;

    color: #333;

    }

     

    Inform us if you need further assistance.

    Thanks.

     

  • Profile Image

    Answered by RickGregory on October 12, 2014 at 05:01 PM
    Thank you – got it!

    ...