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

    Can you add hover text per multiple choice option?

    Asked by srgabor on December 08, 2016 at 01:37 PM

    I have several multiple choice questions that I want to add hover test to. Instead of having the test show up all at once when over the question, I want it per answer.

     

    Is that possible?

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Kevin_G on December 08, 2016 at 02:48 PM

    Unfortunately this is not possible to do in the form builder, I mean, there is not a setting that you set a hover text per option, you can only set the hover text per field/entire question. 

    If you would like to show a hover text when the mouse is placed over an option then you will need to apply some CSS code. 

    Here's a sample of the code that you will need to use: 

    #id_3 span.form-checkbox-item:nth-child(1):hover span::after  {

        content: "This is a hover text per element";

        width: auto;

        height: auto;

        position: absolute;

        margin-left: 100px;

    }

    Here's how it works: 

    1. The green highlighted code is the entire field's ID, you can also find it by following this guide: How-to-find-field-IDs-and-names

    2. The yellow highlighted code is the option HTML element class, all the options have this class and to find it you will need to inspect the source code of your form, to do it, please follow the steps below: 

    Right click on the option you want to apply the code, find the class value of the span element where the option is added, in this case it is "form-checkbox-item" sine the entire option is under this HTML element:

     

    3. Now, applying the code to the general copied class will affect all the options in the field, we only want to affect one single option, in this case since there are multiple options you will need to specify which element needs to be affected, this is what the orange highlighted code does, you will also find more details about the nth-child selector here: http://www.w3schools.com/cssref/sel_nth-child.asp 

    4. The final step is to add an element that will help us to display the text, in this case a used the span element, it can be the same in other fields such as the radio button field, this is highlighted blue on the given code above. 

    Once you have finished the code you need to inject it directly to your form, this guide will help to do it: How-to-Inject-Custom-CSS-Codes

    You can also customize the text shown, the font color, font style, background, size and position, here's also the link to my sample form where you can see how it works: https://form.jotform.com/63425449157966 

    Feel free to clone it.

    If you have any question, please let us know.  

  • Profile Image

    Answered by MartinCo on March 21, 2017 at 06:25 AM

    Hi, I just followed this code in Investment profile section of https://form.jotform.me/70745086704459 

    Can you please tell me how to make this content responsive so It's viewed on mobile screens.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Jim_R on March 21, 2017 at 10:50 AM

    @MartinCo - To give way to the OP, I moved your post to a separate thread https://www.jotform.com/answers/1097607 

    We'll have it addressed there shortly.