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

    Can I add a sublabel or hover hint to a drag-and-drop item?

    Asked by quikval on January 09, 2017 at 06:18 PM

    Can I add a sublabel or hover hint to a drag-and-drop item?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 09, 2017 at 10:42 PM

    You can add hover text to most of the quick and basic fields, sub-label can be set to only some of them. 

    You will find both options, if allowed, on the top toolbar when clicking on the field: 

    Basic and Quick fields: 

    However, if you do not find these options on the field you're requiring it, then you could add it with some custom CSS code, please let us know on which field of your form you want to apply this, we will be glad to help you. 


  • Profile Image

    Answered by quikval on January 10, 2017 at 12:40 PM

    Widget name = Drag and Drop Upload

    I would love your help adding a hover or hint text to it, please!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 10, 2017 at 02:09 PM

    OK, to add a hover text to the widget you will need to get the <li> ID where it has been added as well as the label ID (where the field name displays).

    To get these IDs you will need to right click on the field and select the inspect option: 

    Then, replace the IDs on the highlighted code below: 

    #id_16:hover #label_16::after {

        content: "This is a hover text sample";

        width: auto;

        height: auto;

        position: absolute;

        right: 100px;


    Green is the <li> ID and yellow is the <label> ID, after the "hover" there is a space. 

    This guide will help you to inject the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Here's also the direct link to my form where you can see the live sample: https://form.jotform.com/70088145630958 

    The code can be also customized as you need, remove or change the background color, font size, font color and other changes can be also applied. 

    If you have any question, let us know.