How to position hover text?

How to position hover tips so they dont cover a field option for user selection

Hi Ian,

Thank you reaching out to Jotform Support. You can move hover text box position by injecting a CSS code to your form.

#id_8 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_11 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_12 > .form-description 

{

position: unset;

max-width: 300px;

}





#id_73 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_74 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_18 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_14 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_27 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_61 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_44 > .form-description 

{

position: unset;

max-width: 300px;

}



#id_46 > .form-description 

{

position: unset;

max-width: 300px;

}

Here is how to apply a CSS Code on the form:

1. In Form Builder, click the paint roller icon to get to the Form Designer.

2. Go to the Styles tab and scroll down to Inject Custom CSS.

3. Enter the code provided in the text box field. Changes are saved automatically once CSS code is applied.

Give it a try and let us know how it goes.

Thank you thank works well. However, how can you add a CSS reference to an INPUT TABLE as it has multiple #ID's?

Hi Ian,

Could you let us know which input table you need to insert the hover tips? If you would also like to have different hover tips for every cell, this will require additional CSS. You can provide us with the text or message that you want to put, and where exactly you want them, so we can provide you with the CSS code. You can also send us screenshots, so you can point out exactly where. This guide will show you how to do that.

Once we hear back from you, we'll be able to help you with this.

Hi Neil – thanks for the response. It would be a hover over;
* Additional Vehicles
* Sheds
* Covered storage
* Property features
As per the text already entered. Hover just below like the other CSS settings. No need for cell level.



...

Hi Ian,

I understand you are looking to show the hover text below the input table fields just like the other fields. This can be done by adding custom CSS to your form. Paste the code below into the Inject Custom CSS area:

/*Show hover text below tables - 15949831*/

.form-description {

    position: unset !important;

    max-width: 300px !important;

}

Here's what the result will look like:

Here's the cloned version of the form that you can test.

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