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 Hover Text for widgets that do not have it

    Asked by ddyoyo10 on February 04, 2017 at 03:27 AM

    for widgets that dont have it, how can we add the hover text for them? i know we can use ":hover" but i dont know how to make it work

  • Profile Image

    Answered by Boris on February 04, 2017 at 06:43 AM

    Yes, this is possible to be achieved by using custom CSS, though please keep in mind that the CSS solution is a workaround, and will not be exactly the same as a real Hover Text.

    All we need is to get the ID of the field we are looking to modify:

    https://www.jotform.com/help/146-How-to-find-field-IDs-and-names

    For example, on your form 70234370653350, the first Ticker widget with text "About you..." has an ID of #id_4, so we can use the following CSS for this field:

    #id_4:hover:after {
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
        padding: 10px;
        z-index: 1000;
        position: absolute;
        right: 5px;
        top: 6px;
        width: 130px;
        border: 4px solid #ccc;
        border-radius: 6px 6px;
        box-shadow: 0px 2px 4px #666;
        background: #f5f5f5;
        white-space: normal;
        font-size: 10px;
    }

    I've marked the parts you would modify between different fields in red. The content property sets what is inside the bubble, while the ID of the field decides which field it is applied to. You would add CSS codes to your form by following this guide:

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

    Here is a screen recording of how it would work in action:

    Please try it out, and let us know how it goes.

  • Profile Image

    Answered by ddyoyo10 on February 06, 2017 at 06:14 AM

    How can you get the widget ID? 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 06, 2017 at 06:38 AM

    Hello ddyoyo10,

    Please check the screenshot below on how to get the ID of your widget:

     

    Please check the screenshot below on how you can take advantage of browser "Inspect Element" to know the field id or row id of your form:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!