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

    How can I change the position of a hover text that is blocking my time field

    Asked by SimonsTransports on October 10, 2015 at 07:22 PM

    http://www.simonstransportsbahamas.com/main-reserve.html

    Page URL:
    http://www.simonstransportsbahamas.com/main-reserve.html

    time field blocking
  • Profile Image

    Answered by SimonsTransports on October 10, 2015 at 07:24 PM

    I have removed the hover text in the interim.  I need my customers to be able to complete the form while i await your response.  

  • Profile Image
    JotForm Support

    Answered by Welvin on October 11, 2015 at 03:04 PM

    You can also move down the time field. I think the hover text is blocking the field because of its current position. It's on the right side and the hover text won't fit there. Can you restore that and let us know here? I will check it right away.

    Thanks

  • Profile Image

    Answered by SimonsTransports on October 11, 2015 at 04:40 PM

    i really would not like to move the time field.  That's where I would like it positioned.  Can i just leave it there and have the hover text move either more on the side, above or below? 

  • Profile Image
    JotForm Support

    Answered by mert on October 12, 2015 at 04:50 AM

    Hi,

    To modify the position of the hover text, you need to inject custom CSS to your form.

    Below, you can find the related CSS code. You can use the red marked value to adjust the Hover text bubble, but you need to adjust the hover text's arrow positions too. Blue marked area shows the outer arrow, green marked is the inner small arrow. 

     

    .form-description {

        top : -120px;

    }

    .form-description-arrow {

        border-color : #f3b767 transparent transparent transparent;

        border-style : solid;

        border-width : 10px;

        height : 0;

        width : 0;

        left : 20px;

        top : 120px;

        position : absolute;

    }

    .form-description-arrow-small {

        border-color : whiteSmoke transparent transparent transparent;

        border-style : solid;

        border-width : 7px;

        height : 0;

        width : 0;

        left : 23px;

        top : 119px;

        position : absolute;

    }

     

    Here is the example preview of shifted hover text:

     

     

    If you need further, assistance please let us know.

    Have a nice day.