Can you add hover text per multiple choice option?

  • srgabor
    Asked on December 8, 2016 at 1: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

  • Kevin Support Team Lead
    Replied on December 8, 2016 at 2: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:

    Can you add hover text per multiple choice option? Image 1 Screenshot 20 

    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.  

  • MartinCo
    Replied on March 21, 2017 at 6: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

  • Support_Management Jotform Support
    Replied 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.