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

  • Profile Image
    i2iAlana
    Asked 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

  • Profile Image
    Ben
    Answered 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