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.
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
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.)
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
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?
Steve, I should be able to come up with something later (knock wood).
Hi again Steve
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.