- colehollandcollegeAsked on January 28, 2015 at 05:40 PM
I would like to add a box that displays a ? that when you hover over the ? it pops up a box to reveal text that goes away when you no longer hover. The ? could also be clickable to reveal the text.
- colehollandcollegeAnswered on January 28, 2015 at 06:25 PM
Except it would be nice if you could format the text or even place an image in the hover text, right now it's just plain text.
- colehollandcollegeAnswered on January 28, 2015 at 06:26 PM
I posted that I found this as a "Hover Text" option, except it would be nice if you could format the text or even place an image in the hover text, right now it's just plain text.
- CharlieAnswered on January 28, 2015 at 09:25 PM
You can use custom CSS codes and place it inside the Form Designer->CSS tab to style the hint or help text.
Here's a demo form that I made: http://form.jotformpro.com/form/50278487675975
If you hover of the name field you'll see my hover text formatted with a different style.
To design yours, here's a quick guide:
This is the custom CSS code that I have, you can follow the schema or the elements that I use.
border: 4px solid #34495e;
/*inside the form description*/
border-color: transparent #34495e transparent transparent;
All the bold text are the elements you need to know to design the whole hint text.
.form-description - This is the main element that wraps the hover text, you can adjust size of the hover text here or add a background image as the design.
.form-description-arrow - This is the main arrow pointing to the left side where the field is, basically this is just the arrow you see at the left.
.form-description-arrow-small - This is the small arrow placed just above the main arrow.
.form-description-content - This is the wrapper or main element that holds the content, you can also style the background of this or adjust the fonts styling.
Here's a screenshot of my Form Designer:
I hope this helps. Do let us know if you need more assistance on this.