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 to Style the Field Hover Text?

    Asked by kranai on February 18, 2016 at 03:48 PM
    for some fields I have a hovering text that appears like a bubble when the cursor moves over it. Can I change the style meaning colour of font, background colour of the bubble etc? If yes from where do I do it?
    hover text text-description
  • Profile Image
    JotForm Support

    Answered by jonathan on February 18, 2016 at 04:15 PM

    Please review this thread http://www.jotform.com/answers/35917

    Our colleauge Abajan's solution shows the many differnt CSS code that can be used to style the fields' Hover Text.

    Let us know if you encounter difficulty following the same solution.

    Thanks.

  • Profile Image

    Answered by kranai on February 19, 2016 at 02:20 AM

    Hi

    The code given I assume changes the position of the bubble. What I am asking to change the style of the bubble meaning change the background of the bubble which white at the moment to say red, change the colour of the border etc?

    Can I use the same code?

    Rgds

    Kish

  • Profile Image
    JotForm Support

    Answered by mert on February 19, 2016 at 07:52 AM

    Hi Kish,

    To start with, I will change the general hover text's appearance. If you want to customize them differently for every field, we can look into it later. Below, you will see the necessary CSS code that changes the hover text background and font color. By injecting these codes into your form, you can easily make those customizations.

     

    .form-description-content {

        color: rgb(249, 198, 56);

        background: black;

    }

     

    .form-description-arrow-small {

        border-color: transparent black transparent transparent;

    }

     

    On red marked area, you can change the font color of the "Hover Text" (you can also add hex color code or just the name like "red") and with blue marked areas, you can set the background color of it. Please, check the results from the below:

     

    Please, declare your needs, so I can add more customizations to it.

    Thanks.

  • Profile Image

    Answered by kranai on February 19, 2016 at 09:19 AM

    Hi Mert

    Thanks for your prompt reply. Managed to change the colours as I want. Need the following as well.

     

    1. How to Bold the text description 

    2. How to change the border colour which is white at the moment.

    3. I need to shift or place the bubble such that it does not overlap the input boxes see Home Address hover text and also Department Hover Text...covers the box

    rgds

    kish

  • Profile Image
    JotForm Support

    Answered by mert on February 19, 2016 at 10:23 AM

    Below, you will see the necessary code with their comments for your questions 1 and 2:

    /.border color./

    .form-description {

        border: 4px solid #292861;

    }

     

    .form-description-arrow {

        border-color: transparent #292861 transparent transparent;

    }

     

    /.bold font./

    .form-description-content {

        font-weight: bold;

     

    }

     

    For your 3rd question, adjust the "right" variable's px value.

    .form-description {

        right: 10px;

    }

     

    Please, see the changes from the below:

     

    Regards.

  • Profile Image

    Answered by kranai on February 19, 2016 at 10:57 AM

    Hi Mert

    Thanks for the input...

     

    1. but there is a border point see my form that is white how do I get that red as well.

    2. in my cost field I have a condition based on what seminar is selected I want the cost field to reflect the cost for that seminar. I want the cost for "Master Your Mind" to be $300.00 but each time I see on the preview I get $3000.00. Can u please check if I have done the maths calculation correctly. (is this the best way to do it or is there a better way to do it?)

    3. for the hover text right adjustment I assume the code your gave right:10px will shift ALL the bubble by 10px to the right...am I right? what happens if I want different adjustments for different hover text bubbles?

    4. When I view my form in builder I see all the input fields BUT when I go into Designer a lot of the input fields are not displayed? is this correct?

    Appreciate your answer

    best rgds

    ksh

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on February 19, 2016 at 12:40 PM

    1) I believe you are referring to the border of this field:

    Simply inject the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-dropdown {

        border-color: none !important;

    }

    2) On regards of your second question, it will be addressed here: http://www.jotform.com/answers/776499 

    3) Unfortunately, the share the same class ".form-description", so it's the same adjustment for all.

    4) Your fourth question will be addressed here: http://www.jotform.com/answers/776501 

  • Profile Image

    Answered by kranai on February 19, 2016 at 12:51 PM

    Hi

    No I am not referring to what you are suggesting. I am referring to the hover text as you can see below there is a grey arrow tip above the red arrow tip. How do I change the colour of the grey to be red as well?

    I will wait for the response for q2 and 4 once they get to me.

     

    best rgds

    kish

  • Profile Image
    JotForm Support

    Answered by BDAVID on February 19, 2016 at 02:23 PM

    If you want to change the arrow color from this:

    To this:

    Inject the following code:

    .form-description-arrow {

        border-color: transparent #d02d17 transparent transparent;

    }

    Let us know if you need more help.

  • Profile Image
    JotForm Support

    Answered by mert on February 22, 2016 at 01:25 PM

    Hi Kish,

    Yes, you are right about the limits. The form contents are in a big "div", so the class called "form_all" is contains all other elements and has a "650px" width by default. By increasing it, we can move the hover text more away from the fields; but before this please see the current structure:

     

    As it is seen above, the area between the red rectangle's right and left sides are showing the "650px" wideness. If we come to our hover text's position, we need to set "right" value as "0px" to place it to the outer div's border.

     

    .form-description {

        right: 0px;

    }

     

    Then, we can enlarge the "form-all"'s width,

     

    .form-all {

        width:900px;

    }

     

    Please, see the results from the below:

     

    I hope this one will work for you. Please, don't hesitate to contact us for further assistance.

    Thanks.

  • Profile Image

    Answered by kranai on February 23, 2016 at 10:27 AM

    Hi Mert

    Perfect I got  this sorted I expanded the all form size to 800 px ad placed the hover text about 10px from the right. So work fine.

    Thanks for your help

    kish

  • Profile Image
    JotForm Support

    Answered by mert on February 23, 2016 at 10:32 AM

    Kish,

    You are most welcome. I'm happy to see that the problem is solved for you. For your any other CSS styling problems, you can contact us without any hesitation.

     

    Have a great day.

  • Profile Image

    Answered by kranai on February 28, 2016 at 11:03 AM

    Hi

    Look at form Insight Academy Registration Form

    Just noticed that one of my hover text at Department box is not displaying like the rest. Sorry did not notice this before. All the other hover text are displaying correctly at the right position.

    Please where I have gone wrong

    rgds

    kish

  • Profile Image
    JotForm Support

    Answered by Boris on February 28, 2016 at 01:06 PM

    In order to fix this one hover box, please use the following code:

    #id_20 .form-description { right: -140px; }

    The #id_20 part ensures that the code will be applied to only the hover box inside form field 20 (the Department field), and rest of the code moves hover box further right than it was before:

    Please let us know if you need any further assistance with styling or positioning it, and we will be happy to help.

  • Profile Image

    Answered by kranai on February 29, 2016 at 12:08 PM

    Hi

    I added the CSS code you gave above in my form Insight Academy Registration Form....it did not work the way you have shown above. Pls check and let me know if I  have injected the code correctly.

    thanks

    kish

  • Profile Image

    Answered by Huberson on February 29, 2016 at 01:48 PM

    Hello,

    Go to Designer and comment (or remove ) the CSS block :

    /*.form-description {

        right : 15px;

    }

    */

    And update the CSS code above like:

    #id_20 .form-description {

        right : -140px!important;

     

    }

    You can also use the clone if you need: https://form.jotform.com/60594972375973

     

    Thanks!

  • Profile Image

    Answered by kranai on February 29, 2016 at 02:18 PM

    Hi

    Still not able to get the same effect as yours...by the way test your version say if you do not fill the department field ...it should flag as an error but when this happens your hover text is lost form visibility...pls try out and see...

    btw is it possible just to copy details of one field from one form to another? or the only way is to clone the whole form ...?

    rgds

    kish

     

  • Profile Image

    Answered by Huberson on February 29, 2016 at 04:16 PM

    I don't think it is possible to copy just a field from another form. May I suggest you to use the clone: https://form.jotform.com/60594972375973 as this will avoid you from removing and adding CSS snippets.

    If you still want to use the original form add the bellow CSS:

    li#id_20 {

        width : 500px;

    }

    and change the 'right' property from '-140px' to '15px':

    #id_20 .form-description {

        right : 15px;

    }

    This should fix both the box covering the field and being not totally visible on form error.

     

    Thanks!

  • Profile Image

    Answered by kranai on March 01, 2016 at 12:35 AM

    Hi

    Looks okay now thanks

    kish

  • Profile Image
    JotForm Support

    Answered by mert on March 01, 2016 at 03:41 AM

    In the name of my colleague, you are most welcome. Please, always feel free to contact us for your further questions.

     

    Thanks.