-
schmidtsmeatmarketAsked on March 27, 2019 at 10:33 AM
I'm developing a form for Cutting Instructions for our Meat Market. Many line items need more clarification. I would like an button to click on for more information. Is there a widget for that?
Also, while I have form started, I'm struggling with exporting it into a readable form for our meat cutters. Do you think a fillable PDF would be a better option? If so, again, is there an option for a button for more information?Thank you!
Lynnita Schmidt - Schmidt's Meat Market
-
Victoria_KReplied on March 27, 2019 at 12:58 PM
As far as I understand, you would like to display some sort of tooltips for options of the fields, is this correct?
It seems that we do not have such widget, but we could check for a CSS solution for you. Do you already have a form with options where to add a description?
We will address your other question in a separate thread: https://www.jotform.com/answers/1773700
-
schmidtsmeatmarketReplied on March 27, 2019 at 1:43 PMYes, that is correct. Here’s a screen shot of a meat market in Iowa who has online cutting instructions. They are using MACH Form. It’s the “I” that I want to mimic. Scroll down and see what it looks like when you open it.
Thanks.
Lynnita
Lynnita Schmidt
... -
BJoannaReplied on March 27, 2019 at 3:33 PM
We are unable to see your screenshot. Please note that the files attached inside of an email are not shown here on the forum. You need to open this thread and upload your screenshot.
If possible also provide us a link of the form you want to mimic.
-
schmidtsmeatmarketReplied on March 27, 2019 at 4:43 PMSorry - here’s what I want mine to look like. Specifically the More Information buttons. Also, I like the looks of Tiefenthaler’s form. I’m assuming some of the widgets will help me make mine look better – not so plain. Is that true?
https://tqmeats.com/whole_beef_processing_instructions
Lynnita Schmidt
... -
schmidtsmeatmarketReplied on March 27, 2019 at 5:43 PMNow that I’m looking at this more closely, the example you have below could work for me. Is that the CSS solution that you mention? I don’t know what that is.
Lynnita Schmidt
... -
jherwinReplied on March 27, 2019 at 8:50 PM
Yes, we can add tool tips and hover colors in the fields using custom CSS. Please provide us with the form URL and show us the fields you want to have a tooltip so we can give you the correct CSS for it.
Guide:
-
schmidtsmeatmarketReplied on March 28, 2019 at 9:43 AMHere you go. I have a lot of work to make it pretty, but it’s a start. Will I be able to simply copy the CSS from one field to another and just change the content?
https://form.jotform.com/80875046764163
Thank you!
Lynnita Schmidt
... -
Victoria_KReplied on March 28, 2019 at 11:48 AM
Hello,
You can use the following code to add tooltips for Beef Portion field:
#label_input_13_0:hover:after {
content: "Tool Tip text text text Tip text text text Tip text text text Tip text text text";
}
#label_input_13_1:hover:after {
content: "Tool Tip text text text Tip text text text";
}
#label_input_13_2:hover:after {
content: "Tool Tip text text text Tool Tip text text text Tool Tip text text text Tool Tip text text text Tool Tip text text text";
}
#label_input_13_3:hover:after {
content: "Tool Tip text text text Tip text text text Tip text text text Tip text text text Tip text text text Tip text text text Tip text text text Tip text text text Tip text text text Tip text text text";
}
#label_input_13_4:hover:after {
content: "Tool Tip text text text";
}
#label_input_13_5:hover:after {
content: "Tool Tip text text text";
}
#label_input_13_5:hover:after,
#label_input_13_4:hover:after,
#label_input_13_3:hover:after,
#label_input_13_2:hover:after,
#label_input_13_1:hover:after,
#label_input_13_0:hover:after {
border: 4px solid #ccc;
border-radius: 6px;
background-color: #f5f5f5;
box-shadow: 0px 2px 4px #666;
padding: 5px;
font-size: 10px;
white-space: pre-wrap;
display: block;
width: 250px;
z-index: 1000;
position: absolute;
right: 20em;
top: 1em;
}
Code should be according to following guide: How-to-Inject-Custom-CSS-Codes
Text highlighted in red you can change to show different information for every option.
Please let us know what other fields you need to show description for and we will get the selectors for you.