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

    Is it possible to add Hover Text to the Image Checkbox Widget

    Asked by i2iAlana on December 19, 2014 at 12:31 PM

    Hi,

    For each image in the image checkbox widget of my form I would like to add hover text. so when they hover over the image they can find out a little bit more (this will be 1-2 sentences and is too long to put in the label). is it possible to add this function to the image checkbox. 

     

    Thanks,

    Alana

    Page URL:
    http://www.jotformpro.com/form/43502827582962

    checkbox image checkbox checkbox widget label find thanks
  • Profile Image

    Answered by Ben on December 19, 2014 at 01:39 PM

    Hi Alana,

    There are some things that we could do with CSS and I have created a sample of them in a jotform that you can see here: http://form.jotformpro.com/form/43525108673960

    With this code we can show some text above the image:

    #images_button_container > li:nth-of-type(1):hover:before {
        content: "This is a sample text that should be shown above the image";
        display: block;
    }

    - It will allow us to set the text for each image by changing the bold number above.

    If needed, we can apply some extra styles to the text as well, like this:

    #images_button_container > li:nth-of-type(1):hover:before {
        background-image: linear-gradient(white, snow, silver);
        border-radius: 20px;
        content: "This is a sample text that should be shown above the image";
        display: block;
        margin-bottom: 5px;
        border: 1px solid gray;
        border-top: none;
    }

    - I have applied this on the right image checkbox list.

    I have also applied this code to the same image checkbox, but on the second elements:

    #images_button_container > li:nth-of-type(2):hover label:before {
        color: gray;
        content: "This is some sample text";
        display: block;
        font-size: 12px;
        font-weight: normal;
        margin-bottom: 5px;
    }

    You can mix them up or just copy paste the one that you like to your widget's custom CSS field.

    Do let us know if you have any further questions and we would be happy to assist.

    Best Regards,
    Ben