How can I move the hover text to prevent blocking of selection?

  • Profile Image
    tgfusa
    Asked on May 03, 2012 at 10:33 PM

    I have designed the form, for some questions I had mentioed the "Hover Text" but can't selecting option under Hover Text. Please see the attached screen shot?

     

    Attached screen shot, Q # 10 : Now I can't select option 9 or 10.

     

    Please help me, how I can resolve this?

    Thanks,

    Nitin

  • Profile Image
    jonathan
    Answered on May 03, 2012 at 10:56 PM

    Hi Nitin,

    Please see check this thread: How-can-we-move-the-hover-text-around. It also applies to your concern.

    I used the CSS below to address #9 and #10 of your option field.

    #id_61 .form-description{
    position: absolute;
    left: 420px;
    width: 400px;
    }
    #id_62 .form-description{
    position: absolute;
    left: 420px;
    width: 400px;
    }

    Hope this help. Please inform us if you have more concern.

    Thanks.

  • Profile Image
    tgfusa
    Answered on May 03, 2012 at 11:10 PM

    Cool.. it worked for some questions and for some question still can't select option 10 radio button.

    Issue 2 : Same hover text issue while selecting CHECK box too?

    Can you please give me the code to address above both issue.

    Thanks a ton for your help.

    Can you please remove the image that I attched in my last post? I do not want see that image to the public?

    Thanks again!

  • Profile Image
    jonathan
    Answered on May 04, 2012 at 12:16 AM

    It was only applied on 9 and 10 question.

    I'll show you instead how to do it for the other questions. Check this guide first -How-to-Inject-Custom-CSS-Codes .

    This is how to get the input ID# of the questions you want to fix the hover text.

    1. Click on the input field/question you want to fix. In this example I choose question 16. 
    Click on the gear like icon to view the field properties.

    2. Look for the "#input_67" , this is the #id for question 16. You will use '67' to identify the input #id in the CSS

    3. I did the question 9 and 10, they are #id_61, #id_62 respectively. When you add question 16, the CSS should look like this.

    #id_61 .form-description{

    position: absolute;

    left: 420px;

    width: 400px;

    }

    #id_62 .form-description{

    position: absolute;

    left: 420px;

    width: 400px;

    }

    #id_67 .form-description{

    position: absolute;

    left: 420px;

    width: 400px;

    }

     

    Please try doing it. Just post back if you need further assistance.

     

    P.S.

    I could not delete the image you included earlier, I made the post private instead. Only you and my colleagues at support team can view the post.

  • Profile Image
    liyam
    Answered on May 04, 2012 at 12:31 AM

    In addition to jonathan's response, you can comma separate each "#id_xx .form-description". 

    You can replace your existing code with this:

    #id_16 .form-description, #id_28 .form-description, #id_60 .form-description,#id_61 .form-description, #id_62 .form-description, #id_67 .form-description, #id_71 .form-description{
    position: absolute;
    left: 420px;
    width: 400px;
    }


    If you still need assistance with other items in your form where the hover text needs to be moved, please let us know.

    Thanks.

  • Profile Image
    tgfusa
    Answered on May 04, 2012 at 09:23 AM

    Thanks for your quick help with very clear instructions. I have added other questions input field with comma seperate.

    Thanks.