[re-position hover text] Hover / Help text on Date Time obstructs AM/PM Picker and Calendar picker

  • Profile Image
    DirectOne
    Asked on February 03, 2014 at 03:33 PM

    When I turn on hover text for the Date/Time field it obstructs the AM/PM selector and Calendar button. See images below.

    I've turned off the Hover Text for the time being but if you add it in and add text you should be able to replicate it.

  • Profile Image
    pinoytech
    Answered on February 03, 2014 at 04:15 PM

    Hi,

    Is this something you want to achieve?

    In order to achieve that, inject this custom css into your form.

    .form-description {

    position: absolute;

    right: -64px !important;

    top: -9px !important;

    }

    Here's the guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you need further assistance, please feel free to contact us again at anytime.

  • Profile Image
    DirectOne
    Answered on February 03, 2014 at 04:18 PM

    @Pinoytech

    Thank you for the rapid response.  I'll go ahead and attempt to add this. 

    Wish support and resolution was this quick for all issues I've posted.

    DirectOne

  • Profile Image
    DirectOne
    Answered on February 03, 2014 at 04:45 PM

    Close but no cigar...

     

    Now it is getting cut off when embedded into wordpress site. I would upload the photo but for replies it only allows linking images.

  • Profile Image
    abajan
    Answered on February 03, 2014 at 05:05 PM

    It's possible to use injected CSS to position the box above or below the field and have its arrow repositioned to the bottom or top but it's kinda tricky.

    I'll be back with a solution.

  • Profile Image
    abajan
    Answered on February 03, 2014 at 07:12 PM

    Hi again,

    If you replace the injected CSS with

    #id_17 .form-description,
    #id_24 .form-description {
    left: 405px !important;
    top: -45px !important;
    min-width: 160px;
    }

    /* Firefox hack */
    @-moz-document url-prefix() {
       #id_17 .form-description,
       #id_24 .form-description {
           left: 375px !important;
       }
    }

    /* Opera hack */
    x:-o-prefocus,
    #id_17 .form-description,
    #id_24 .form-description {
       left: 335px !important;
    }

    #id_17 .form-description-arrow,
    #id_24 .form-description-arrow {
    border-color: #CCC transparent transparent transparent;
    left: 62px;
    top: 36px;
    }

    #id_17 .form-description-arrow-small,
    #id_24 .form-description-arrow-small {
    border-color: #F5F5F5 transparent transparent transparent;
    left: 65px;
    top: 32px;
    }

    the hover text for both date fields will be like

    and there shouldn't be any problem with it getting cut off in WordPress. If it is, please post a screenshot. See the following guide originally posted by my colleague Welvin:

    1. Go to: https://www.jotform.com/help/image_upload.php?naked=true

    2. Click "Choose File" button and choose your image file (should be in JPG or PNG format and not more than 500KB)

    3. Click "Send Image" to upload (you should be able to see the file successfully uploaded in the image section)

    4. Select and Copy the direct file URL from the "Image URL" box

    5. In our forum editor, click the "Insert/Edit Image" button:

    6. Paste link in the "Image URL" box:

    **You should be able to adjust the image dimensions, we advise to set 550 in the first box to fit the image in the forum view.**

    You're done!

  • Profile Image
    DirectOne
    Answered on February 04, 2014 at 01:01 PM

    Works great!  Thanks for the help.  Hopefully this can help someone else in the future as well.

  • Profile Image
    EltonCris
    Answered on February 04, 2014 at 01:47 PM

    @ DirectOne 

    Great! :)

    On behalf of my colleagues, you're welcome!

    Should you have any other questions or concerns, feel free to open a new thread.

    Regards!