How can I move the Hover Box?

I am making a customer survey and have added a hover box for explanation. The questions is a matrix and when previewing it, the hover box covers up the last column making it so some options can't be chosen. How do I relocate the hover box?

Please respond to dhudson@gostylie.com

Please inject following css codes to your form.

   .form-description {

        margin-right : -100px;

    }

Please follow the guide about How to Inject Custom CSS Codes. 

It will be seen as below after adding this code.

If you need any other support by our side, please let us know. 

Thank you so much! That worked. How do I move it down a little now?

You're welcome.

To move your hover box down a little, please, inject the css codes to your form. As you can see below, I just added margin-top:30px;  css code to existing css.

    .form-description {

        margin-right : -100px;

        margin-top : 30px;

    }

If you have any questions, feel free to let me know.

When looking at the survey in preview or after published, it shows the code for spaces and breaks. It doesn't have those when simply editing it. 

Also, can I make certain words in the hover message bold? What I am trying to achieve is an explanation of the terms used in the first column of question. So in the hover message I want to bold each of the terms before i give the explanation. So for the first one it would be

Photo Manager- Photos of previous work for your clients to see

I'm afraid I'm not sure what you meant by this:

When looking at the survey in preview or after published, it shows the code for spaces and breaks. It doesn't have those when simply editing it.

Is the form displaying incorrectly for you somewhere? If so, could you please attach a screenshot of the issue, so we can assist you properly.

When it comes to the Hover Boxes, they accept plain text entries only, and cannot be used with rich / formatted text.

Okay actually you can scratch that. I decided not to go with the hover message. However, for the same question when viewing it in the mobile version it expands the first column, making the other columns very small. When flipping the phone landscape, the problem is fixed. Is there a way of formatting it so when in portrait view it looks normal.

The styling issue of the Matrix field is being caused by the mobile responsive styles present on the form. To fix it, we can simply include the following custom CSS in your form:

@media only screen and (max-width:40em) {
    .form-matrix-row-headers {
        width:auto;
    }
}

You can inject CSS into your form by following this guide:

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

In case the above code doesn't work for some reason, we can increase specificity of the code by using this instead:

@media only screen and (max-width:40em) {
    .form-matrix-row-headers {
        width: auto !important;
    }
}

However, the first code would be preferable. Please try it out, and let us know how it goes.