- samphaimobileAsked 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
- JotForm SupportabajanAnswered on July 19, 2013 at 07:57 AM
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.)
- samphaimobileAnswered 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
- samphaimobileAnswered 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?
- JotForm SupportabajanAnswered on July 19, 2013 at 01:25 PM
Steve, I should be able to come up with something later (knock wood).
- JotForm SupportabajanAnswered on July 20, 2013 at 08:00 PM
- JotForm SupportabajanAnswered on July 20, 2013 at 09:57 PM
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.