How to add button to click on for more information?

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?

Thank you!

Lynnita Schmidt - Schmidt's Meat Market

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 

Yes, 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


...

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. 

Sorry - 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


...

Now 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


...

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: 

- Where to Find My Form URL?

- How to Post Screenshots to Our Support Forum

Here 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


...

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.