What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How To Add and Style Help or Hover Text?

    Asked by colehollandcollege 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.

    clickable
  • Profile Image

    Answered by colehollandcollege 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.

  • Profile Image

    Answered by colehollandcollege 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.

  • Profile Image
    JotForm Support

    Answered by Charlie on January 28, 2015 at 09:25 PM

    Hi,

    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.

    .form-description {

        width: 200px;

        height: 100px;

        border: 4px solid #34495e;

        background-image: url('http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/02/gaia_calibration_image/14263602-2-eng-GB/Gaia_calibration_image_focuson.jpg');

    }

    /*inside the form description*/

     

    .form-description-arrow {

     border-color: transparent #34495e transparent transparent;

    }

     

    .form-description-arrow-small {

       

    }

    .form-description-content {

        color: white;

    }

     

    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.

    Thank you.