How can I alter the location of the Hover Text to be more suitable for my form?

I have recently added hover text to my form. Initially, my issue was that the text was blocking the field for the options, but I fixed that by following this advice https://www.jotform.com/answers/768087-Hover-text-is-clipped-and-not-displayed-completely

Before:

After:

This is better since people can now enter their answer, but it's still not ideal. Is there a way to make the hover text appear above or below the prompt?

Also, this method still leave areas of my form like this looking a bit odd. In the following image, the part that is highlighted is where I am hovering. The text appears quite far away.

This is specifically regarding my Marketing Collateral Request form. Thank you!!

Please try to inject this custom CSS code to your form:

.form-description {
    right : -50px!important;
    width : 200px!important;
    max-width:200px!important;
    height : 65px;
    top : -70px!important;
}
.form-description-content {
    height : 40px!important;
    width : 180px!important;
}

Guide: How-to-Inject-Custom-CSS-Codes

Please give it a try and let us know how it goes.

That works, thank you! Is there a way to change the appearance of the hover text box?

Yes, could you please tell what are all the styles that you wish to apply so we can provide you the code?

If the arrow could just be on the bottom side of the box, that would be ideal. Thank you!

Please try these CSS codes:

.form-description-arrow {
border-color: #CCC transparent transparent transparent;
left:62px;
top:69px;
}
.form-description-arrow-small {
border-color: #F5F5F5 transparent transparent transparent;
left:65px;
top:64px;
}

Guide: How-to-Inject-Custom-CSS-Codes

Please give it a try and let us know how it goes.

This looks great, thank you!