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 can I get the hover text arrow to be pointing down and have the hove text box above?

    Asked by mrdudefish on December 05, 2011 at 12:55 PM
  • Profile Image

    Answered by paoloumali on December 05, 2011 at 01:22 PM

    Hi,

    Can you provide a link to the form you're working on and, if possible, a screenshot or a url of a page that demonstrates something similar to your desired outcome?

    Thanks.

  • Profile Image

    Answered by mrdudefish on December 05, 2011 at 01:38 PM
  • Profile Image
    JotForm Support

    Answered by idarktech on December 06, 2011 at 12:52 AM

    Hi,

    You can inject this custom css code to that form.

     

    .form-description {

    right: 164px !important;

    top: -59px !important;

    width: 158px;

    height: 68px;

    }

    .form-description-arrow {

    border-color: #CCC transparent transparent transparent;

    border-style: solid;

    border-width: 10px;

    height: 0;

    width: 0;

    left: 60px;

    top: 70px;

    position: absolute;

    }

     

    .form-description-arrow-small {

    border-color: whiteSmoke transparent transparent transparent;

    border-style: solid;

    border-width: 7px;

    height: 0;

    width: 0;

    left: 63px;

    top: 68px;

    position: absolute;

    }

     

    To learn how to Inject Custom CSS Codes, please visit the link below.

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

     

    I hope that helps. If you have further questions, just let us know. Thank you for using JotForm!

  • Profile Image

    Answered by mrdudefish on December 06, 2011 at 01:42 AM

    Thank you for the fast respose!

  • Profile Image

    Answered by mrdudefish on December 09, 2011 at 02:02 PM
  • Profile Image

    Answered by on June 24, 2015 at 12:51 PM

    Quick update I spotted on this -- using the code above.  The key to arrow direction is based on the "border-color"

     

    This will give you a down arrow with "whitesmoke" as the color.

    border-color: whitesmoke transparent transparent transparent;

     

    This will give you a triagnle with the point oriented to the top-right

    border-color: #F5F5F5 whitesmoke transparent transparent;

     

    Basically, you can mix/match the color/orientation, so experiment away.

  • Profile Image
    JotForm Support

    Answered by Boris on June 24, 2015 at 02:20 PM

    Yes, Kent, that is correct.

    The border colors are specified as top right bottom left. The following code:

    border-color: #F5F5F5 whitesmoke transparent transparent;

    Translates to top color of #F5F5F5, right color whitesmoke, and bottom and left colors transparent. Now, as the top border is the only one with the color, and as the border is narrow on the center and wide at the base, this means that the colored top border looks like a down-pointing triangle. A right colored border appears as a left-pointing triangle, and so on.

    Please note, however, that this is a rather old thread from 2011. As posting in this thread also causes all participants to receive an email notification whenever a new reply is posted, we kindly ask that you please avoid posting in such old threads, and also to please open a new thread if you have any specific questions of your own.

    Enjoy your day, Kent, and thank you for the update.