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

  • Profile Image
    SimonsTransports
    Asked on October 10, 2015 at 07:22 PM

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

  • Profile Image
    SimonsTransports
    Answered 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
    Welvin
    Answered 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
    SimonsTransports
    Answered 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
    mert
    Answered 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.