How to move location of hover text bubble?

The hover text bubble is getting in the way of filling the form. Can you please advise how this hover bubble can be moved to location A and location B (Not sure which will be best). The bubble speech entry will also need to move location on the bubble outer (please see screen shot). Many thanks for your help

It is possible to move hover text Bubble by Injecting Custom CSS code. Here is the code for option A that you proposed:

.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 Link how to Inject custom CSS:

http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

I will replay to you with Option B shortly. 

And here is code for option B:

.form-description {

    top : 320px;

}

.form-description-arrow {

    border-color :  transparent transparent  #f3b767 transparent;

    border-style : solid;

    border-width : 10px;

    height : 0;

    width : 0;

    left : 20px;

    top : -22px;

    position : absolute;

}

.form-description-arrow-small {

    border-color :  transparent  transparent whiteSmoke transparent ;

    border-style : solid;

    border-width : 7px;

    height : 0;

    width : 0;

    left : 23px;

    top : -14px;

    position : absolute;

}

Option B will look like this.

And Option A will look like this.

Hope this will help. Let us know if you need further assistance.

Hi, thank you for your help. I injected this code (option A) however the hover bubble isn’t quite positioned as it should as shown your  example screenshot. I have checked to see If I have included all the correct code which from what I can see I have. I’ve changed a few px numbers to see if I could correct the positioning myself. 40 minutes later and I’m still struggling to get it in the correct position! Can you please help, thank you.

Upon testing your form one more time I noticed that hover text box is differently shown in Chrome and Firefox. I am assuming that you are using Firefox because code I provided and tested is working in Chrome and not in Firefox. 

I will investigate this problem and I will try to find solution and back to you when I find it. 

Please try adding this code as well  inside Inject Custom CSS field.

div.form-description-arrow, div.form-description-arrow-small { top: 137px; }

Hover bubble text should like this:

Hope this will help. 

I added the code you suggested  however it does not seem to have made a difference. The following three images show how the bubble looks to me through different browsers -

CHROME

FIREFOX

INTERNET EXPLORER

Hi, thank you for all your help. To resolve the issue we have decided to remove the hover bubble and have added the hover bubble text as a subheading instead. Many thanks for your help :)

On behalf of my colleague you are most welcome. I'm glad that this situation is solved now.

If you need further assistance please let us know as we're here to help.

Your question is moved to separate thread. 

http://www.jotform.com/answers/538112