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

    Controlling hover text position using custom CSS

    Asked by DanBlum on November 20, 2015 at 09:05 PM

    I want to move the hover text on the option tools that are in my form.  I found instructions for doing so.  I found the CSS code that I should enter and found the spot to enter the CSS code under preferences->form styles.  I entered the suggested code, but the hover text did not move.  The hover text  still conceals the scroll bars.   What am I doing wrong?

     

    Here's the code I inserted :

    form-description {

        position : absolute;

        right : -150px;

    }

    I adjusted the number pixels to be even larger but to no avail.  I wonder if the code :  "form-description" should be something that is related to hover text????

     

    See my form.

     

     

     

     

    Page URL:
    https://form.jotform.com/53026970839968

    hover text position css code form-description custom CSS hover text
  • Profile Image
    JotForm Support

    Answered by Jan on November 21, 2015 at 10:26 AM

    The class form-description is the correct selector. Please don't forget the "." or period before the selector.

    There is an existing style for that selector. In order to change that, you need to override the value. You can do that by adding !important in the value.

    .form-description {

    right: -150px !important;

    }

    You can now fully customize the position of the hover text.

    Hope that helps. Let us know if you need any more help. Thank you.

  • Profile Image

    Answered by DanBlum on November 21, 2015 at 11:23 AM

    Thanks.  That worked.  I am totally ignorant of the CSS language (its name, syntax, and semantics...what else is there...like I said "totally"), so I was at the mercy of the post I read for positioning hover text.  That made me not catch that I had missed  the period (a syntactic requirement) when I copied and pasted the command, nor was I aware of the "important" value (semantics).   So your help was priceless.

    From my experience with other languages, I did sense that the 150 is the number of pixels and "right" is the direction to move it.  I still don't see what in the command connects this solely to hover text.  But, you don't need to go into that...my intent is not for you to teach me CSS.  

    By the way, I am a retired programmer, and back in the 1980's I used a CSS language, but that was Computer Simulation Language which I used to write a stochastic model of the to-be-announced IBM S/38 to predict it's performance and evaluate alternative designs. 

    You guys are great.  I always get quick and easy to understand answers. 

     

     

    Thanks.

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 21, 2015 at 09:24 PM

    Thank you for the confirmation that all is good now on your form. We appreciate also your effort on  taking the time providing us more details.

    I would also recommend reviewing our Form Designer video guides which you can find here http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-

    You can watch and learn basics on CSS on the video http://www.jotform.com/form-designer/tuts/episode4/

    Feel free to contact us again anytime should you need assistance on JotForm

    Cheers