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 does one add "hover Text" or "hint" to each item in a payment field?

    Asked by samphaimobile on July 19, 2013 at 06:16 AM

    Hi i am almost done with my Order form. All i need now is the possibility to add a hover or hin text once somebody hovers any of the item on my order form.

    How can i do that?

     

    this is the form http://form.jotform.co/form/31862214171851 

    Let's say i hover the Design and Print item : "Edit Flyer" i want a hint that gives more details about that item

     

    Thanks

     

    Steve

    Page URL:
    http://form.jotform.co/form/31862214171851

    hint JotForm CSS hover text CSS hint text no javascript
  • Profile Image
    JotForm Support

    Answered by abajan on July 19, 2013 at 07:57 AM

    Hi Steve

    In the form builder, a hover text popup can be applied to the entire payment field but not to each product separately. The simplest way I can think of to get around this limitation would be to embed the form's full source into a web page and add a script to the page which would show a tooltip for each product. Would such a workaround be suitable for you? (Unfortunately, the HTML title attribute is problematic. Otherwise, I would have recommended going that route instead.)

  • Profile Image

    Answered by samphaimobile on July 19, 2013 at 08:15 AM

    Yes i was thinking about a script but that could create other conficts maybe ...... Anyways, if you would have a good workaround for that i would not say no LOL

  • Profile Image

    Answered by samphaimobile on July 19, 2013 at 11:17 AM

    Abajan, it seems i have some problems to understand the implementation of that script to jotforms source code.... do you have any tutorial or workaround on how to do it?

  • Profile Image
    JotForm Support

    Answered by abajan on July 19, 2013 at 01:25 PM

    Steve, I should be able to come up with something later (knock wood).

  • Profile Image
    JotForm Support

    Answered by abajan on July 20, 2013 at 08:00 PM

    Actually, I've found a simpler solution which uses CSS instead of JavaScript. I'll post a demo later tonight (Barbados time)

  • Profile Image
    JotForm Support

    Answered by abajan on July 20, 2013 at 09:57 PM

    Hi again Steve

    Have a look at this demo. It uses the Hint.css tooltip library. The instructions can be found at this link but here's what to do, in a nutshell:

    1. Get the form's full source and embed it into the body of a web page of your choice

    2. Download this file and then upload it to the same directory (folder) containing the web page that has the form

    3. Insert this line in the head of the web page that has the form

    4. In the page's source, search for each instance of class="form-product-item" and change it to class="form-product-item hint--right hint--rounded hint--success"

    5. For each product or service to which a hint is to be added, insert data-hint="" and place the desired text within the quotes (See the source of my demo for guidance)

    That's pretty much it but if you need clarification on anything, we'd be happy to help.

    Cheers