Modifying size of Hover Text balloon/font

  • RickGregory
    Asked on October 12, 2014 at 1:22 PM

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

    Jotform Thread 441951 Screenshot
  • jonathan
    Replied on October 12, 2014 at 3: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

    Modifying size of Hover Text balloon/font Image 1 Screenshot 20

     

    Hope this help Inform us if you need further assistance.

    Thanks.

     

     

     

  • RickGregory
    Replied on October 12, 2014 at 3: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?


    ...
  • RickGregory
    Replied on October 12, 2014 at 3: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?


    ...
  • jonathan
    Replied on October 12, 2014 at 4: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.

     

  • RickGregory
    Replied on October 12, 2014 at 5:01 PM
    Thank you – got it!

    ...